我有一个帮助页面,其中有一堆javascript切换来显示或隐藏该主题的帮助。有没有办法将它们全部切换为全部显示或全部隐藏?
<a href="javascript:toggle('roles');">Roles or Account Permissions</a>
<div id="roles" style="display:none">
<a href="javascript:toggle('tracks');">Tracks and Activities</a>
<div id="tracks" style="display:none">
<a href="javascript:toggle('password');">Modifying Password</a>
<div id="password" style="display:none">
喜欢也许
<a href="javascript:toggle('roles', 'tracks', 'password');">Toggle all</a>
这是我的javascript
function toggle(divId) {
"use strict";
var div = document.getElementById(divId);
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
答案 0 :(得分:3)
你有jQuery标签,所以听起来你正在使用jQuery?
为每个A标签添加一个类名:
<a href="javascript:$('a.className').toggle();">toggle</a>
无需切换代码。
答案 1 :(得分:1)
使用arguments
集合循环使用所有ID:
function toggle() {
"use strict";
[].slice.call(arguments).forEach(function(divId) {
var div = document.getElementById(divId);
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
});
}
为方便起见,我将arguments
转换为纯数组(使用Array.prototype.forEach
方法),当然也可以使用简单的for
循环。
查看下面的演示。
function toggle() {
"use strict";
[].slice.call(arguments).forEach(function(divId) {
var div = document.getElementById(divId);
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
});
}
&#13;
a {display: block;}
&#13;
<a href="javascript:toggle('roles');">Roles or Account Permissions</a>
<div id="roles" style="display:none">Roles</div>
<a href="javascript:toggle('tracks');">Tracks and Activities</a>
<div id="tracks" style="display:none">Tracks</div>
<a href="javascript:toggle('password');">Modifying Password</a>
<div id="password" style="display:none">Modifying Password</div>
<a href="javascript:toggle('roles', 'tracks', 'password');">Toggle all</a>
&#13;