jQuery的垂直下拉菜單

Question

我正嘗試使用ul和li創建一個下拉菜單。 我的實際問題是，當我點擊字母「A」時，它同時打開菜單「A」和菜單「B」，同樣的問題發生在我點擊字母B時。

這是我的代碼：

HTML

<ul class="nav"> 
    <li> 
    <a class="clickto">A </a> 
    </li> 
    <li class="show" style="display: none;"> 
    <a href="#">AAA </a> 
    </li> 
    <li class="show" style="display: none;"> 
    <a href="#">AAA </a> 
    </li> 
</ul> 
<ul class="nav"> 
    <li> 
    <a class="clickto">B </a> 
    </li> 
    <li class="show" style="display: none;"> 
    <a href="#">BBB </a> 
    </li> 
    <li class="show" style="display: none;"> 
    <a href="#">BBBB </a> 
    </li> 
</ul> 

jQuery的

$(".clickto").click(function(){ 
    if ($(this).hasClass("clicked")){ 
    $(".show").slideUp(500); 
    $(this).removeClass("clicked") 
    }else{ 
    $(".show").slideDown(500); 
    $(this).addClass("clicked"); 
    } 
}); 

這裏的日e fiddle

Answer 1

您的問題是，$('.show')將在頁面上匹配show類的所有元素 - 這意味着兩個菜單。

你可以通過更具體的選擇器來解決這個問題，該選擇器找到最接近的nav類，然後在其中找到show類。

$(".clickto").click(function() { 
    var $show = $(this).closest('.nav').find('.show'); 
    if ($(this).hasClass("clicked")) { 
    $show.slideUp(500); 
    $(this).removeClass("clicked") 
    } else{ 
    $show.slideDown(500); 
    $(this).addClass("clicked"); 
    } 
}); 

的jsfiddle：https://jsfiddle.net/9cauyora/