Wie zu verhindern, dass mehrere Schieberegler auf dem gleichen Element

Question

Ich habe derzeit mit einem Sub-UL Liste. Wenn ich auf einen Listeneintrag klicke, möchte ich, dass der UL-Schieberegler wechselt. Das habe ich erreicht. Das Problem, das ich gerade habe, ist, wenn ich auf den gleichen Gegenstand klicke, den ich geöffnet habe, um ihn zu schließen, führt er einen doppelten Wechsel aus. Es ist erwähnenswert, dass ich möchte, dass nur eine Untereinheit gleichzeitig geöffnet ist.

HTML

<div class="top"> 
<ul> 
    <li><a href="#"> Item </a></li> 
<li class="drop"><a href="#"> Item Drop </a> 
    <ul class="sub"> 
    <li><a href="#"> Sub Item </a></li> 
    <li><a href="#"> Sub Item </a></li> 
    <li><a href="#"> Sub Item </a></li> 
    </ul> 
</li> 
<li><a href="#"> Item </a></li> 
<li><a href="#"> Item </a></li> 
<li class="drop"><a href="#"> Item Drop</a> 
    <ul class="sub">> 
    <li><a href="#"> Sub Item </a></li> 
    <li><a href="#"> Sub Item </a></li> 
    <li><a href="#"> Sub Item </a></li> 
    </ul> 
</li> 
</ul> 
</div> 

CSS

ul { 
    li { 
    ul { 
     display:none; 
    } 
    } 
} 

JS

$('.drop').click(function(){ 
    $('.sub').slideUp(); 
    $(this).children('.sub').slideToggle(); 
}); 

http://codepen.io/anon/pen/RRZPvZ

Answer 1

Versuchen Sie, die folgenden

$('.drop').click(function(e){ 
    if($(e.target).closest('ul').is(':not(.sub)')) {//if the clicked element is has a ul that is not .sub we slide them up 
    $('.sub').slideUp();} 
    $(this).children('.sub').slideToggle(); 
}); 

oder:

$('.drop').click(function(e){ 
    $('.sub').not($(this).children('.sub')).slideUp();//hide all except the one we want to display 
    $(this).children('.sub').slideToggle(); 
});