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(); 

}​