如何在按鈕單擊上切換具有相同類名的所有元素的隱藏/顯示

Question

我正試圖在所有具有相同類的div上切換隱藏/顯示。我在我的頁面上有幾個表格，每行都有多個字符串。我只顯示第一個字符串，並將其餘字符串隱藏在style ='display：none;'隱藏的div中。

我只是不能得到這個工作。有什麼建議麼？ HTML的

例如：

<a href=# onClick='toggleHist(\"".$zone."\");return false;'>Additional Info</a> 

    <table> 
    <tr> 
    <td>asdfasdf <div class='zone_1' style='display:none;'>asdfasdf asdfasdf asdfasdf </div></td> 
    </tr> 
    <tr> 
    <td> 
    asdfasdf<div class='zone_1' style='display:none;'> asdfasdf asdfasdf asfasdf </div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    adfasdf<div class='zone_1' style='display:none;'> asdfasdf asdfasdf asdfasdf </div> 
    </td> 
    </tr> 
    </table> 

我的javascript：

function toggleHist(zone_name){ 
    //alert(zone_name); 
    $('.'+zone_name).toggle(); 

} 

使用.show（）;和.hide（）;這兩個工作，但切換不會。我究竟做錯了什麼？

Answer 1

作爲替代.toggle()

可以創建包含display: none一個CSS類，並使用.toggleClass()切換的元素類。

.DisplayNone 
{ 
    display: none; 
} 


function toggleHist(zone_name){ 

    $('.'+zone_name).toggleClass('DisplayNone'); 

}  

或者您可以通過檢查以查看元素是否可見來使用顯示和隱藏。

function toggleHist(zone_name){  

    if ($('.'+zone_name).is(":visible")) 
     $('.'+zone_name).hide();   
    else 
     $('.'+zone_name).show(); 

} 

Answer 2

如果show()作品，hide()作品，但toggle()不，我看到的只有一個解釋：你的事件被觸發兩次（或任何偶數量）。