嵌套式可折叠菜单问题求助：二级折叠项无法展开

嘿，我看到你尝试做嵌套的可折叠FAQ结构，遇到了内部问题点击没反应的情况，作为新手踩这个坑很正常，我来帮你捋清楚问题出在哪，以及怎么解决。

问题根源分析 #

你参考的W3Schools代码是针对平级可折叠元素设计的，当你改成嵌套结构后，会遇到两个核心问题：

1. 结构匹配错误：如果你的嵌套HTML没写对（比如把内部的.content和.collapsible按钮隔了其他标签），原JS里的this.nextElementSibling就找不到对应的答案容器，自然点击没反应。
2. 父级高度不自适应：即使结构正确，当内部答案展开时，父级的.content容器高度是固定的（初始展开时计算的scrollHeight），会把内部展开的内容截断，看起来就像没触发效果。

另外，原JS的判断逻辑依赖内联样式的maxHeight，虽然本身没问题，但嵌套场景下需要额外处理父级容器的高度更新。

修正后的完整代码 #

我给你调整了代码，保留动画效果的同时完美支持嵌套结构：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 8px; /* 给每个折叠按钮加个间距，看起来更清晰 */
}

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

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

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

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin-bottom: 8px; /* 容器底部间距 */
}

/* 给嵌套的内容加个缩进，层级更明显 */
.content .content {
  background-color: #e6e6e6;
  margin-left: 20px;
}
</style>
</head>
<body>

<h2>FAQ 常见问题</h2>

<!-- 第一层：分类标题 -->
<button class="collapsible">邮费标准</button>
<div class="content">
  <!-- 第二层：具体问题 -->
  <button class="collapsible">发往欧洲的邮费是多少？</button>
  <div class="content">
    <p>发往欧洲的标准邮费为每件35元，7-15个工作日送达；加急件每件60元，3-5个工作日送达。</p>
  </div>

  <button class="collapsible">发往亚洲的邮费是多少？</button>
  <div class="content">
    <p>发往亚洲邻国的邮费为每件18元，3-7个工作日送达；偏远地区需额外加收10元服务费。</p>
  </div>
</div>

<button class="collapsible">退换货政策</button>
<div class="content">
  <button class="collapsible">商品收到后多久可以申请退换？</button>
  <div class="content">
    <p>自签收之日起15天内，商品保持全新未使用状态，可申请退换货。</p>
  </div>

  <button class="collapsible">退换货的运费由谁承担？</button>
  <div class="content">
    <p>因商品质量问题退换，运费由商家承担；因个人原因退换，运费由买家自行承担。</p>
  </div>
</div>

<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.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }

    // 关键：向上遍历所有父级的.content容器，更新它们的高度以适应内部变化
    var parentContent = content.parentElement.closest('.content');
    while (parentContent) {
      // 先重置父级的maxHeight，再重新计算
      parentContent.style.maxHeight = null;
      parentContent.style.maxHeight = parentContent.scrollHeight + "px";
      // 继续找上层的.content
      parentContent = parentContent.parentElement.closest('.content');
    }
  });
}
</script>

</body>
</html>

关键修改点说明 #

1. HTML结构规范：确保每个.collapsible按钮和对应的.content是直接相邻的兄弟元素，没有其他标签隔开，这样this.nextElementSibling才能准确找到答案容器。
2. CSS优化：给嵌套的.content加了缩进和不同的背景色，让层级更清晰，同时增加了间距提升可读性。
3. JS核心修复：新增了向上遍历父级.content容器的逻辑，每当内部元素展开/折叠时，自动更新所有父级的高度，确保内容不会被截断。
4. 保留动画效果：依然使用max-height和transition实现平滑展开/折叠，没有牺牲用户体验。

你可以直接复制这段代码运行，就能看到完美的嵌套折叠FAQ效果了，以后再扩展其他分类或问题也能直接套用这个结构。

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