jquery slideToggle奇怪

Question

我有一個菜單，在.click觸發一個slideToggle顯示/隱藏列表中的元素。

頁面首次加載時，列表中的所有元素都可見。當您點擊與列表中不同元素相對應的菜單時，不同部分會滑落。菜單如下：

One | Two | Three 

名單如下：

<li class="one">Here's one thing</li> 
<li class="two">Here's another thing</li> 
<li class="three">Here's a third thing</li> 

而當你點擊一個，兩個和三個向上滑動發生的事情是，讓你只看到項目與.one。這確實發生。而當你再次點擊一個，兩個和三個滑下來，所以你又看到了一切。這是完全正確的。

然而，事情變得很奇怪，如果你不點擊回到ONE來展開列表，而是跳轉到TWO：預期的操作是你現在將看到「two」類中的項目，而沒有看到.one和.three。相反，你只看到。三點擊三，然後顯示你.one和.two和隱藏。三

這是一個爛攤子。以下是我現在打電話給他們的方式：

$('#clickone').click(function(){ 
$('#result li:not(.one)').slideToggle();}); 

$('#clicktwo').click(function(){ 
$('#result li:not(.two)').slideToggle();}); 

$('#clickthree').click(function(){ 
$('#result li:not(.three)').slideToggle();}); 

有一個簡單的方法，對嗎？

Answer 1

var ooxx = { 
    '#clickone' : '.one', 
    '#clicktwo' : '.two', 
    '#clickthree' : '.three' 
}, 
$.each(ooxx, function(i, n) { 
    $(i).click(function() { 
     $(n).siblings().slideToggle(); 
    }); 
}); 

我想這樣的事情。希望可以幫到你:)

Answer 2

$('#clickone').click(function() { 
    var li = $('#result li.one').slideDown().siblings(); 
    toggler(li); 
}); 

$('#clicktwo').click(function() { 
    var li = $('#result li.two').slideDown().siblings(); 
    toggler(li); 
}); 

$('#clickthree').click(function() { 
    var li = $('#result li.three').slideDown().siblings(); 
    toggler(li); 
}); 

function toggler(el) { 
    if (el.is(':visible')) el.slideUp(); 
    else el.slideDown(); 

}​