切換功能無法正常工作

我有一個簡單的切換功能來顯示和隱藏內容。它通過點擊H2觸發，並添加了「全部顯示」/「全部隱藏」功能。切換功能無法正常工作

我遇到的問題是，當您展開幾個內容區域時，然後單擊「顯示所有」它隱藏打開的並顯示隱藏的內容，而不是僅顯示隱藏的內容。我知道它是由「.toggle」函數觸發和切換開放函數而導致的。從理論上講，我懷疑我必須爲擴展後的類添加一個類，然後運行檢查以查看是否有任何內容已打開並且不會切換，只會展開隱藏內容。要關閉「全部關閉」按鈕，我必須做相反的事情？

我該如何補救？ example is here

來源

2012-01-31 Dirty Bird Design

@Nanne和ShankarSangoli真棒！日x爲了矯正我。希望我可以將兩者都標記爲正確的答案，只要先與誰回答。謝謝你們，非常感謝。在香卡的真棒男人的ESP演示。 – 2012-01-31 21:56:41

因爲toggle只會切換元件的狀態（顯示/隱藏）。在這種情況下不使用slideToggle ，而是使用slideUp/slideDown有條件試試這個。

$(".toggleAll").click(function() { 
    if($(this).text() == 'Show All'){ 
     $(".faq p").slideDown("slow"); 
     $(this).text('Hide All'); 
     $(".faq h2").addClass('active'); 
    } 
    else{ 
     $(".faq p").slideUp("slow"); 
     $(this).text('Show All'); 
     $(".faq h2").removeClass('active'); 
    } 
});

Demo

來源

2012-01-31 21:49:30 ShankarSangoli

非常感謝演示和知識。 – 2012-01-31 21:56:59

簡單：不要使用「toggle()」作爲顯示全部按鈕，而是使用「show()」。同上，用於隱藏一切，用「hide()"。

僅使用toggle()爲單次點擊

來源

2012-01-31 21:43:09 Nanne

切換功能無法正常工作

回答

相關問題