如何在按钮单击上切换具有相同类名的所有元素的隐藏/显示

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()不，我看到的只有一个解释：你的事件被触发两次（或任何偶数量）。