Question

我有一系列触发JQuery动画的按钮，其中面板向下滑动到页面底部。面板绝对定位在页面上，当单击一个按钮时，它的相应面板会动画。

功能很好，但我只希望能够在任何给定时间显示一个面板。

我的HTML是：

<div id="footerNav">
<a class="button" id="b1" href="#"><span></span>Upcoming Events</a>
<a class="button" id="b2" href="#"><span></span>From the Blog</a>
<a class="button" id="b3" href="#"><span></span>Global Leaders</a>
<a class="button" id="b4" href="#">Watch Video</a>
</div>

<div id="paneb1" class="pane"></div>
<div id="paneb2" class="pane"></div>
<div id="paneb3" class="pane"></div>

我的Jquery是：

$("a.button").toggle(function(){
     idClick = $(this).attr("id");
     newSelector = $("#pane"+idClick);
     newSelector.animate({ 'bottom' : 99});
     $(this).addClass("activeBtn");
}, function(){
     newSelector.animate({ 'bottom' : -275});
     $(this).removeClass("activeBtn");
});

我尝试使用not选择器，但它不起作用：

$(".pane:not(newSelector)").animate({ 'bottom' : -275});

在切换按钮时，我需要做什么才能将任何OTHER面板动画回原来的位置？

Answer 1

您可以使用not()方法代替:not()选择器：

$(".pane").not(newSelector).animate({ bottom : -275 });

注意，最好使用局部变量而不是全局变量，因此在定义新变量时请考虑使用var关键字：

var newSelector = $("#pane" + idClick);

Answer 2

尝试：

$(".pane").not(newSelector).animate({ 'bottom' : -275});

由于您的版本没有对您所做的javascript var的引用，因此它正在寻找名为“newSelector”的选择器。

使用JQuery排除某些项目

2 个答案: