Vertikales Dropdown-Menü mit jQuery

Question

Ich versuche, ein Dropdown-Menü mit ul und li zu erstellen. Mein aktuelles Problem ist, wenn ich auf den Buchstaben "A" klicke, öffnet es Menü "A" und Menü "B" zur gleichen Zeit, das gleiche Problem passiert, wenn ich auf den Buchstaben B klicke.

:

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"); 
    } 
}); 

Hier ist th e fiddle

Answer 1

Ihr Problem ist, dass $('.show') alle Elemente mit der show Klasse auf der Seite übereinstimmt - was beide Menüs bedeutet.

Sie können dies beheben, indem Sie einen spezifischeren Selektor haben, der die am nächsten gelegene nav Klasse findet und dann die show Klasse darin findet.

$(".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/