Вертикальное раскрывающееся меню с 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/