多级折叠菜单功能异常排查求助

问题分析 #

当前存在两个核心异常：

• 打开Section 3时，Section 3.2无法显示：原HTML结构中Section 3的下一个兄弟元素仅为Section 3.1，未将所有子级折叠项统一包裹，导致父级点击时无法触发全部子按钮显示；且collapsible2默认设置display:none，未关联父级展开状态。
• 关闭Section 3后，Section 3.1的文本残留：父级折叠时仅隐藏了子按钮，未同步隐藏已展开的子级内容面板。

修复步骤及代码 #

1. 调整HTML结构 #

将Section 3的所有子级折叠项（含对应内容）包裹在容器内，让父级按钮可通过控制容器状态批量管理子元素：

<button type="button" class="collapsible">🍎 Section 1</button>
<div class="content"><p>Text here <a href="https://www.test.nl/" class="urltext">link text</a></p></div>

<button type="button" class="collapsible">🍎 Section 2</button>
<div class="content"><p>Text here</p></div>

<button type="button" class="collapsible">🍎 Section 3</button>
<!-- 新增容器包裹子级折叠项 -->
<div class="sub-collapsible-container">
  <button type="button" class="collapsible2">🍎 Section 3.1</button>
  <div class="content"><p>Text here</p></div>
  
  <button type="button" class="collapsible2">🍎 Section 3.2</button>
  <div class="content"><p>Text here</p></div>
</div>

2. 修改CSS #

移除collapsible2的默认隐藏样式，改为通过父容器状态控制子按钮可见性：

body {
  background-color: #000000;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color: transparent;
}

.collapsible {
  background-color: #303030;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
  margin-bottom: 1px;
}

.collapsible:focus {
  background-color: #555;
}

.collapsible2 {
  /* 移除默认display:none */
  overflow: hidden;
  background-color: #303030;
  color: white;
  cursor: pointer;
  padding: 18px;
  padding-left: 40px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
  margin-bottom: 1px;
}

.collapsible2:focus {
  background-color: #555;
}

.content {
  padding: 0 3px;
  display: none;
  overflow: hidden;
  color: white;
  background-color: #000000;
  font-family: Arial;
  font-size: 15px;
  text-align: justify;
}

/* 父容器隐藏时，子级折叠项同步隐藏 */
.sub-collapsible-container {
  display: none;
}

3. 优化JavaScript逻辑 #

合并重复监听逻辑，新增父级折叠时递归关闭所有子面板的处理：

// 通用折叠初始化函数
function setupCollapsibles(className) {
  const coll = document.getElementsByClassName(className);
  for (let i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      const content = this.nextElementSibling;
      // 切换当前内容面板显示状态
      content.style.display = content.style.display === "block" ? "none" : "block";
    });
  }
}

// 初始化一级、二级折叠
setupCollapsibles("collapsible");
setupCollapsibles("collapsible2");

// 为一级折叠添加子容器控制及递归关闭逻辑
const parentCollapsibles = document.getElementsByClassName("collapsible");
for (let i = 0; i < parentCollapsibles.length; i++) {
  parentCollapsibles[i].addEventListener("click", function() {
    const subContainer = this.nextElementSibling;
    if (!subContainer.classList.contains("sub-collapsible-container")) return;
    
    // 切换子容器显示状态
    subContainer.style.display = subContainer.style.display === "block" ? "none" : "block";
    
    // 父容器关闭时，递归关闭所有子折叠面板及内容
    if (subContainer.style.display === "none") {
      const subCollapsibles = subContainer.getElementsByClassName("collapsible2");
      for (let j = 0; j < subCollapsibles.length; j++) {
        subCollapsibles[j].classList.remove("active");
        const subContent = subCollapsibles[j].nextElementSibling;
        subContent.style.display = "none";
      }
    }
  });
}

修复效果 #

• 点击Section 3时，子容器展开，Section 3.1和3.2同时显示
• 关闭Section 3时，所有子折叠面板（包括已展开的3.1）及其内容会被同步隐藏，无文本残留

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