我有大约 13 个 HTMLItem,如下所示:
html 脚本 1
<HTMLItem><staticValue>
<input type="BUTTON" class="clsPromptButton" onClick="JavaScript:ShowHide("HomeTown")" value="Home Town or City"
style="color: #4e86c2; font: 14px Ariel; font-weight:Bold; text-align:left;height:20px;border:0pt solid #FFFFFF">
</staticValue></HTMLItem>
html 脚本 2
<span id = "HomeTown">
html 脚本 3
</span>
它们都是这样定义的:
<script language="javascript">
function HideStartup()
{
var p1 = document.getElementById("EmpOrg");
var p2 = document.getElementById("CertType");
var p3 = document.getElementById("PrevClients");
var p4 = document.getElementById("LLCourse");
var p5 = document.getElementById("ProfInt");
var p6 = document.getElementById("ProfMem");
var p7 = document.getElementById("ProfRef");
var p8 = document.getElementById("ProjExp");
var p9 = document.getElementById("Quali");
var p10 = document.getElementById("SecExp");
var p11 = document.getElementById("HomeTown");
var p12 = document.getElementById("WorkAS");
p1.style.display = 'none';
p2.style.display = 'none';
p3.style.display = 'none';
p4.style.display = 'none';
p5.style.display = 'none';
p6.style.display = 'none';
p7.style.display = 'none';
p8.style.display = 'none';
p9.style.display = 'none';
p10.style.display = 'none';
p11.style.display = 'none';
p12.style.display = 'none'
}
HideStartup()
function ShowHide(prompt)
{
var ps = document.getElementById(prompt);
if (ps.style.display != 'none' )
{
ps.style.display = 'none';
}
else
{ ps.style.display = '';
}
}
</script>
---> 因此,当我单击标题名称时,它们都被编写为“显示/隐藏”部分。...但我想要一个按钮,以及 2 个按钮,充当“全部展开”和“全部折叠”要使用,我该怎么做?
最佳答案
如果所有按钮都有 clsPromptButton
类。您可以使用以下代码:
在脚本标记的顶部放置,window.toggleAll = 0;
然后将以下内容放在某处:
function toggleAll() {
var buttons = Array.prototype.slice.call(document.querySelectorAll('.clsPromptButton'));
buttons.forEach(function (button) {
// Swap each element between display 'none' and 'block'
if (window.toggleAll === 0) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
// Swap window.toggleAll between 0 and 1
window.toggleAll = window.toggleAll === 0 ? 1 : 0;
});
}
然后在页面上的某个位置放置一个调用 toggleAll
函数的按钮。
不过,我建议您研究一下揭示模块模式设计模式,这样您就可以更好地封装您的代码,并且不会将代码放在全局命名空间中。不过你现在可能不需要担心这个:)
关于javascript - 全部展开全部折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23610765/