我正在尝试在具有相同类的所有div上切换hide / show。我的页面上有几个表,每行有多个字符串。我只显示第一个字符串,并将其余的字符串放在一个隐藏着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();两者都有效,但切换不会。我做错了什么?
答案 0 :(得分:2)
作为.toggle()
您可以创建一个包含display: none
的css类,并使用.toggleClass()
在元素上切换该类。
.DisplayNone
{
display: none;
}
function toggleHist(zone_name){
$('.'+zone_name).toggleClass('DisplayNone');
}
或者您可以通过检查元素是否可见来使用show和hide。
function toggleHist(zone_name){
if ($('.'+zone_name).is(":visible"))
$('.'+zone_name).hide();
else
$('.'+zone_name).show();
}
答案 1 :(得分:2)
如果show()
有效,hide()
有效,但toggle()
没有,我只看到一个解释:您的事件被触发两次(或任何均数)。