一页JQuery上的多个切换按钮
我在一页上有多个按钮。当您单击按钮时,一个面板将滑出并显示内容。我在这里设置了一个工作演示: 正如你所看到的,它工作得相当好。单击按钮时,会显示一个面板,再次单击时,面板会向下滑动。问题在于打开一个面板,然后打开第二个面板。这是一个错误,因为活动类保持不变,而面板在下一次单击时不会做出反应。最好是你自己试一试这个演示。单击几次,因为错误不会在第一次单击时发生 我认为问题在于切换中的回调函数,如下所示。有人知道如何解决这个问题吗一页JQuery上的多个切换按钮,jquery,toggle,Jquery,Toggle,我在一页上有多个按钮。当您单击按钮时,一个面板将滑出并显示内容。我在这里设置了一个工作演示: 正如你所看到的,它工作得相当好。单击按钮时,会显示一个面板,再次单击时,面板会向下滑动。问题在于打开一个面板,然后打开第二个面板。这是一个错误,因为活动类保持不变,而面板在下一次单击时不会做出反应。最好是你自己试一试这个演示。单击几次,因为错误不会在第一次单击时发生 我认为问题在于切换中的回调函数,如下所示。有人知道如何解决这个问题吗 $("a.button").toggle(function(){
$("a.button").toggle(function(){
idClick = $(this).attr("id");
newSelector = $("#pane"+idClick);
varthis = $(this);
newSelector.animate({ 'bottom' : 99});
$(".pane").not(newSelector).animate({ 'bottom' : -275});
$(this).addClass("activeBtn");
$("a.button").not(varthis).removeClass("activeBtn");
}, function(){
newSelector.animate({ 'bottom' : -275});
$(this).removeClass("activeBtn");
});
我认为切换会把你搞得一团糟,因为一个给定的窗格可能会被隐藏,或者是通过点击相应的按钮,或者是点击另一个按钮。试试这样的
$("a.button").click(function(e){
idClick = $(this).attr("id");
var newSelector = $("#pane"+idClick);
varthis = $(this);
if ($(this).hasClass("activeBtn")){
$(this).removeClass("activeBtn");
newSelector.animate({ 'bottom' : -275});
}
else{
newSelector.animate({ 'bottom' : 99});
$(".pane").not(newSelector).animate({ 'bottom' : -275});
$("a.button").removeClass("activeBtn");
$(this).addClass("activeBtn");
}
});
我做了一个变化…没有更多的动画,而是添加和删除类。我将使用CSS3来处理动画。谢谢!!!