使用JQuery條件模擬點擊切換

我正在構建一個項目，其中包含由三個按鈕之一觸發的多個面板。單擊按鈕時，面板滑出，任何現有的面板都會滑出。我開始使用切換，但是我需要所有的切換才能與彼此合作，所以我將事件改爲點擊。使用JQuery條件模擬點擊切換

一切都很好，但我遇到了關閉面板的問題。你可以在這裏看到一個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 
}

這沒有工作。事實上，它阻止了所有的面板一起工作。我可以做什麼來做到這一點，而無需切換到切換？

來源

2012-10-26 JCHASE11

一種可能的解決方案是記住當前面板的原始狀態（請參見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-26 14:09:22

感謝您的幫助！ – JCHASE11

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-26 14:21:15

使用JQuery條件模擬點擊切換

回答

相關問題