JQueryでスライディングトグルサブメニューを作成しようとしています

Question

JQueryトグルを使用してスライディングサブメニューを作成しようとしています。私は、次のことを試してみたが、無駄に：

<script> $(".menu li a").click(function(){ var ul = $(this).children("ul"); if (ul.is(":none")) { ul.slideDown(); } else { ul.slideUp(); } }); </script>

とも

<script> $("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); }); </script>

HTMLコードはに適用されます：結合

<div class="menu-brk-products-container"> 
<ul id="menu-brk-products" class="menu"> 
    <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a> 
     <ul class="sub-menu"> 
      <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a> 
      </li> 
     </ul> 
    </li> 

Answer 1

クリックしなければなりませんドキュメントの読み込み後に完了：

$(document).ready(function() { 
$("ul li.menu-item a").click(function() { $(this).children("ul").toggle(); }); 
}); 

また、このクリックが要素にバインドされ、それがどのULを含んでいないので、それは何もしません。 「バッテリー駆動のアラーム」を「スモークアラーム...」に切り替えたい場合は、クリックしてからセレクターを削除します（ただし、「バッテリー駆動のアラーム」もクリックすると消えます。別のセレクターが必要です）。

Answer 2

試してみてください。

<div class="menu-brk-products-container"> 
    <ul id="menu-brk-products" class="menu"> 
     <li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-65"><a>Smoke Alarms – Ionisation</a> 
      <ul class="sub-menu" style="display: none"> 
       <li id="menu-item-432" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-432"><a href="/?portfolio_cats=battery-powered-smoke-alarms">Battery Powered Alarms</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<script> 
$(document).ready(function() { 
    $(".menu li a").click(function(){ 
     var ul = $(this).parent().children("ul"); 

     if (ul.is(":hidden")) { 
      ul.slideDown(); 
     } 
     else { 
      ul.slideUp(); 
     } 
    }); 
}); 
</script> 

最大の問題は、子供を得ていました。 「this」はアンカータグであり、<li>要素ではないため、一致するものは戻ってこなかった。また、私は上下にスライドする必要がありますので、テストを "：hidden"に変更しました。