javascript - 全部展开全部折叠

我有大约13个HTMLItems，看起来像这样：

HTML脚本1

<HTMLItem><staticValue>
<input type="BUTTON" class="clsPromptButton" onClick="JavaScript:ShowHide(&quot;HomeTown&quot;)" 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/