在基于按钮的可折叠 HTML / CSS 菜单中重置 nextElementSibling 的 style.display

Question

我是意大利人，64 岁。 自 20 世纪 90 年代末以来，我有了一个个人 html 页面。我是一个落后者，顽固地坚持只使用 HTML/CSS，有很多表 - 我是一只恐龙，我知道。 随着时间的推移，我设计了一个主页，其中按钮（类名=“collapsible”）用于展开或折叠紧跟在每个可折叠按钮后面的 DIV 中包含的菜单项（链接）组。

http://www.cesarebrizio.it/

由于以下点击事件侦听器，它工作正常：

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display == "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

昨天，我尝试在页面顶部添加一个按钮，以一次性展开或折叠整个菜单。它没有按预期工作。

单击页面顶部标有“全部展开”的按钮（称为“toggleExpColl”）会启动以下函数 clickHandler()，它会执行两件事：

1. 在“全部展开”和“全部折叠”之间交换按钮文本
2. 强制单击“可折叠”类中的每个按钮，从而导致紧随每个“可折叠”按钮之后的每个 DIV 的 style.display 重置。

<script>
    function clickHandler() {
        var elem = document.getElementById("Exp_Coll");
        if (elem.innerHTML=="Expand All") 
             elem.innerHTML = "Collapse All";
        else elem.innerHTML = "Expand All";

        var coll = document.getElementsByClassName("collapsible");
        var i;
        for (i = 0; i < coll.length; i++) {
            coll[i].click();
        }
        }    
</script>

当我单击toggleExpColl且所有可折叠按钮处于相同状态（全部折叠或全部展开）时，效果很好。 但是，很明显，如果我在按钮处于不同状态的情况下单击“toggleExpCall”，它只会反转按钮状态，并且我无法展开所有按钮或折叠所有按钮。

我发现了几个 :active CSS 伪类的示例，也许我可以用它们来选择性地重置可折叠按钮，但我不确定使用它的正确方法。

在您看来，这是将我的 HTML 主页中每个可折叠按钮的 nextElementSibling 的 style.display 重置为相同值的最简单、最直接的方法？？

非常感谢，祝一切顺利， 切萨雷

Answer 1

解决方案意味着范式的改变。 现在，我不再将可折叠 DIV 定位为每个可折叠按钮的 nextElementSibling，而是利用所有可折叠 DIV 都属于“content”类的事实，因此现在函数 clickHandler() 使用 querySelectorAll 来交换 style.display 属性无论 DIV 的当前状态如何。

<script>
function clickHandler() {
    var elem = document.getElementById("Exp_Coll");
    const nodeList = document.querySelectorAll(".content");
    if (elem.innerHTML=="Expand All") { 
       elem.innerHTML = "Collapse All";
       for (let i = 0; i < nodeList.length; i++) {
          nodeList[i].style.display = "block";
       }
    } else {
      elem.innerHTML = "Expand All";
      for (let i = 0; i < nodeList.length; i++) {
         nodeList[i].style.display = "none";
      }        
    };
}  
</script>