0

我有一个菜单，在 .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”类中的项目，而不会看到 .one 和 .one 和 .one 。三。相反，您只会看到 .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();});

一定有一种简单有效的方法，对吧？

4

2 回答 2

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

我猜是这样的。希望能帮到你：）

于 2010-09-15T04:34:22.977 回答
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();

}​
于 2010-09-15T06:52:41.997 回答