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

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() 无效，我只看到一种解释：您的事件被触发两次（或任何偶数）。