我在一个页面上有多个按钮。当您单击按钮时,面板会滑出并显示内容。我在这里设置了一个工作演示:http://jsfiddle.net/5ZgMR/1/
正如您所看到的,它运作得相当好。单击按钮时,会显示一个面板,然后再次单击该面板时,面板会向下滑动。问题在于打开一个面板然后再打开一个面板。它是错误的,因为活动类保持不变并且面板在下一次单击时没有反应。最好只是尝试演示并亲自看看。点击几次,因为第一次点击时没有发生错误。
我认为问题在于切换中的回调函数,如下所示。任何人都有任何想法如何解决这个问题?
$("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");
});
答案 0 :(得分:0)
我认为切换会让你感到困惑,因为无论是点击相应的按钮还是点击其他按钮,都可以隐藏给定的窗格。尝试更像这样的东西......
$("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");
}
});