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 的项目。这确实发生了。当您再次单击 ONE 时，2 和 3 会向下滑动，因此您会再次看到所有内容。完全正确。

但是，如果您不返回 ONE 以展开列表，而是跳转到 TWO，事情会变得很奇怪：预期的操作是您现在会看到“two”类中的项目，而没有看到 .一和三。相反，您只会看到 .three 单击 THREE，然后显示 .one 和 .two 并隐藏 .three

真是一团糟。我现在是这样称呼它们的：

$('#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

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

}​

Answer 2

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

我猜是这样的。希望能帮到你:)