一页JQuery上有多个切换按钮

Question

我在一页上有多个按钮。当您单击按钮时，面板会滑出并显示内容。我在这里设置了一个工作演示：http://jsfiddle.net/5ZgMR/1/

如您所见，它运行良好。单击按钮时，会显示一个面板，然后再次单击时，面板会向下滑动。问题出在您打开一个面板然后打开第二个面板时。活动类仍然存在并且面板在下次单击时没有反应是错误的。最好只是尝试演示并亲自查看。单击几次，因为第一次单击时不会发生错误。

我认为问题出在toggle中的回调函数上，如下图。有人知道如何解决这个问题吗？

$("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");
    });​

Answer 1

我认为切换会搞砸你，因为通过点击相应的按钮或点击不同的按钮可能会隐藏给定的窗格。尝试更多类似的东西......

$("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");
     }
});