如何让嵌套式Collapsible按钮页面加载时全部展开？

需求：页面加载时所有Collapsible按钮默认处于展开状态，用户可随时点击任意按钮切换展开/收起状态；现有代码中点击闭合的父按钮会自动展开子元素，仅需微调实现初始展开效果。

修改后的完整代码 #

JavaScript

const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach(collapsible => {
    collapsible.addEventListener("click", function() {
        open(this);
        const children = this.nextElementSibling.querySelectorAll('.collapsible');
        children.forEach(open);
    });
    // 初始化调用open函数，实现默认展开
    open(collapsible);
});

function open(element) {
    element.classList.toggle("active");
    var content = element.nextElementSibling;
    if (content.style.display === "block") {
        content.style.display = "none";
    } else {
        content.style.display = "block";
    }
}

CSS

.collapsible {
  background-color: #0486C1;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #254062;
}

.collapsible::after {
  content: '\002B';
  margin-left: 5px;
}

.collapsible.active::after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #E2E2E2;
  transition: max-height 0.2s ease-out;
}

p {
  color: #000000;
}

HTML

<button type="button" class="collapsible">Act 1</button>
<div class="content">
   <button type="button" class="collapsible">Scene 1</button>
   <div class="content">
      <button type="button" class="collapsible">Snippet 1</button>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button type="button" class="collapsible">Snippet 2</button>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button type="button" class="collapsible">Snippet 3</button>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
   </div>
   <button type="button" class="collapsible">Scene 2</button>
   <div class="content">
      <button type="button" class="collapsible">Snippet 1</button>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button type="button" class="collapsible">Snippet 2</button>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <button type="button" class="collapsible">Snippet 3</button>
      <div class="content">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
   </div>
</div>

修改说明 #

在原JavaScript代码的遍历逻辑中，新增open(collapsible)调用，页面加载时会对所有层级的折叠按钮执行一次展开操作：

• 为按钮添加active类，切换按钮右侧的符号（从+变为-）
• 将按钮对应的内容区域display属性设为block，实现内容展开

内容的提问来源于stack exchange，提问作者Adrian Fridge