如何防止同一項目上的多個幻燈片

Question

我目前有一個帶UL的列表。點擊列表項目時，我希望UL滑動切換。這我已經實現了。我目前遇到的問題是，如果我點擊打開的相同項目關閉它，它會執行雙重切換。值得一提的是，我只希望一次打開一個子文件。

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

嘗試使用以下

$('.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(); 
}); 

或：

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