Question

我正在构建一个具有多个面板的项目，由三个按钮之一触发。单击按钮时，面板滑出，任何现有面板滑开。我开始使用切换，但我需要所有的切换与彼此合作，所以我将事件更改为单击。

一切都很好，但我遇到了关闭面板的问题。你可以在这里看到一个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
}

这没有用。实际上，它阻止了所有面板一起工作。如果不切换到切换，我该怎么做才能完成这项工作？

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

Answer 2

一种可能的解决方案是记住当前面板的原始状态（参见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。

使用JQuery Conditionals通过单击模拟切换

2 个答案: