試圖在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它不會做任何事情。 如果您想在「Smoke alarms ...」上打開「Battery Powered Alarms」，請點擊，然後從選擇器中移除（但點擊時也會使「Battery Powered Alarms」消失，您需要不同的選擇器）。

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>元素，因此沒有匹配返回。如果我們應該向上或向下滑動，我還將測試更改爲「：隱藏」。