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/