javascriptのは、私は次のHTMLを持って対応し、モバイルメニュー再作成しようとしているミックス

Question

にとで作業していない：

<ul id="mobileNav"> 
    <li class="toggle"><a href="#canvas" id="mobile-close-nav" class="icon-close"></a></li> 
    <li class="folder"> 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle" class="folder-toggle-box hidden"> 
      <label for="mobile-folder-toggle" class="folder-toggle-label" data-href="#">About</label> 
      <div class="subnav"> 
       <ul class="sub-menu"> 
        <li class="page-collection"><a href="#">About Us</a></li> 
        <li class="page-collection"><a href="#">The Team</a></li> 
       </ul> 
      </div> 
    </li> 
    <li class="folder"> 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle" class="folder-toggle-box hidden"> 
      <label for="mobile-folder-toggle" class="folder-toggle-label" data-href="#">About</label>Products</label> 
      <div class="subnav"> 
       <ul class="sub-menu"> 
        <li class="page-collection"><a href="#">First</a></li> 
        <li class="page-collection"><a href="#">Second</a></li> 
        <li class="page-collection"><a href="#">Third</a></li> 
       </ul> 
      </div> 
     </li> 
</ul> 

を私は開くために、以下のスクリプトを使用しています/サブメニューを閉じます。

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
$('.sub-menu').hide(); 
$("li:has(ul)").click(function(){ 
     $("ul",this).toggle(); 
    }); 
}); 
</script> 

しかし、「入力」と「ラベル」の組み合わせでは機能しません。

<input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle" class="folder-toggle-box hidden"> 
      <label for="mobile-folder-toggle" class="folder-toggle-label" data-href="#">About</label> 

これに変更されています：

<a class="folder-toggle-label" data-href="#">About</a> 

（「入力」が削除され、「ラベル」を「A」に変更されます） が、私はそれを動作させる必要があることは、以下の時に動作します元のコードと同じように、入力/ラベルのコンボが他のものを制御する必要があるためです。スクリプトを修正するにはどうすればよいですか？

ありがとうございます！ここで

Answer 1

私はそれを動作させることを試みた：

$(document).ready(function($) { 
 
$('.sub-menu').hide(); 
 
$(".folder-toggle-box").change(function(){ 
 
     $(this).parent().find("ul").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<ul id="mobileNav"> 
 
    <li class="toggle"><a href="#canvas" id="mobile-close-nav" class="icon-close"></a></li> 
 
    <li class="folder"> 
 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle1" class="folder-toggle-box hidden"> 
 
      <label for="mobile-folder-toggle1" class="folder-toggle-label" data-href="#">About</label> 
 
      <div class="subnav"> 
 
       <ul class="sub-menu"> 
 
        <li class="page-collection"><a href="#">About Us</a></li> 
 
        <li class="page-collection"><a href="#">The Team</a></li> 
 
       </ul> 
 
      </div> 
 
    </li> 
 
    <li class="folder"> 
 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle2" class="folder-toggle-box hidden"> 
 
      <label for="mobile-folder-toggle2" class="folder-toggle-label" data-href="#">Products</label> 
 
      <div class="subnav"> 
 
       <ul class="sub-menu"> 
 
        <li class="page-collection"><a href="#">First</a></li> 
 
        <li class="page-collection"><a href="#">Second</a></li> 
 
        <li class="page-collection"><a href="#">Third</a></li> 
 
       </ul> 
 
      </div> 
 
     </li> 
 
</ul>

Answer 2

実は、あなただけのバブリングからのイベントを防ぐために持っています。このようにfalseを返すだけです。

jQuery(document).ready(function($) { 
$('.sub-menu').hide(); 
$("li:has(ul)").click(function(){ 
     $("ul",this).toggle(); 
     return false; 
    }); 
});