1

我正在构建一个具有多个面板的项目，由三个按钮之一触发。单击按钮时，面板会滑出，并且所有现有面板都会滑开。我开始使用切换，但我需要所有切换相互配合，所以我将事件更改为单击。

一切都很好，但我在关闭面板时遇到了问题。你可以在这里看到一个 jsfiddle 演示：http: //jsfiddle.net/3W4uG/1/

如您所见，面板打开得很好。但是，您无法通过再次按下按钮来关闭它们。

我的 JQuery 看起来像这样：

$("a.button").on("click", function(e){
        idClick = $(this).attr("id");
        newSelector = $("#pane"+idClick);

        //close panes and remove active classes
        $(".pane").removeClass("panelUp");
        $("a.button").removeClass("activeBtn");

        //make active
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");

        e.preventDefault();
});​

我正在考虑实现一个条件语句，所以模拟一个这样的切换：

var thisBtn = $(this);

if(thisBtn.hasClass("activeBtn")){
    $(this).removeClass("activeBtn");   //remove active state
    newSelector.removeClass("panelUp"); //remove panel with css3
}

else{
    $(".pane").removeClass("panelUp"); //closes down any other pane
    $("a.button").removeClass("activeBtn"); //removes all other active classes
    $(this).addClass("activeBtn");  //add active class to button just clicked
    newSelector.addClass("panelUp"); //slides up new pane with css3
}

这没有用。事实上，它阻止了所有面板一起工作。在不切换到切换的情况下，我能做些什么来完成这项工作？

4

2 回答 2

1

http://jsfiddle.net/3W4uG/5/

$("a.button").on("click", function(e){

    var idClick = $(this).attr("id");
    var newSelector = $("#pane"+idClick);
    var isCurrentPane=    $(this).hasClass("activeBtn"); 

        $(".pane").removeClass("panelUp");
        $(".button").removeClass("activeBtn");

    if(!isCurrentPane)
    {
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");
    }           
    e.preventDefault();      
});​
于 2012-10-26T14:21:15.193 回答
0

一种可能的解决方案是记住当前面板的原始状态（见下文wasActive），如果面板最初是打开的，则不重新打开它。

$("a.button").on("click", function(e) {

    idClick = $(this).attr("id");
    newSelector = $("#pane" + idClick);

    var wasActive = newSelector.hasClass('panelUp');  // newly added

    //close panes and remove active classes
    $(".pane").removeClass("panelUp");
    $("a.button").removeClass("activeBtn");

    if (!wasActive) {                                 // newly added

        //make active
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");
    }

    e.preventDefault();

});​

更新了 FIDDLE。

于 2012-10-26T14:09:22.447 回答