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：预期的动作是你现在可以看到“两个”类中的项目，而不会看到。一个和三个。相反，你只能看到。三个点击三个然后显示你.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

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

}

jquery slideToggle奇怪

2 个答案: