HTML三级折叠结构异常：经验模块下的二级折叠按钮无法展开内容

嘿，我帮你揪出两个导致Experience模块下二级折叠失效的关键问题啦，咱们一步步来解决：

问题1：JavaScript里的拼写错误 #

你在处理collapsible2的代码里，把nextElementSibling拼写成了nextElementsibling（注意Sibling的首字母S要大写！）。这个拼写错误会让content2变量直接变成undefined，自然没法切换内容的显示状态了。

问题2：HTML结构里的多余<br>标签 #

在每个collapsible2按钮后面，你加了<br><br>，这会导致nextElementSibling获取到的是<br>元素，而不是你想要的content2容器。浏览器会把相邻的<br>当成兄弟元素，代码根本找不到正确的内容块。

修正后的完整代码示例 #

1. 修正后的JavaScript

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";
    }
  });
}

var coll2 = document.getElementsByClassName("collapsible2");
var j;

for (j = 0; j < coll2.length; j++) {
  coll2[j].addEventListener("click", function() {
    this.classList.toggle("active");
    // 修正拼写错误：Sibling首字母大写
    var content2 = this.nextElementSibling;
    if (content2.style.display === "block") {
      content2.style.display = "none";
    } else {
      content2.style.display = "block";
    }
  });
}

2. 修正后的Experience模块HTML

把按钮和内容块之间的<br><br>去掉，保持结构连贯：

<button class="collapsible"><h3>EXPERIENCE</h3></button>
<div class="content">
  <button class="collapsible2"><h4>EXAMPLE1 </h4></button>
  <div class="content2">
    <h4>Development of New Salesforce Feature: AAA</h4>
    <ul>
      <li>XYZ</li>
    </ul>
    <h4>Development of New Salesforce Feature: BBB</h4>
    <ul>
      <li>XYZ</li>
    </ul>
  </div>

  <button class="collapsible2"><h4>EXAMPLE 2</h4></button>
  <div class="content2">
    <ul>
      <li>XYZ</li>
    </ul>
  </div>
</div>

额外优化建议（可选） #

其实你可以统一折叠按钮和内容容器的类名，比如所有折叠按钮都用collapsible，内容容器都用content，这样只需要一段JavaScript代码就能处理所有折叠效果，不用写两个重复的循环：

// 统一处理所有折叠按钮
var collapsibles = document.querySelectorAll(".collapsible, .collapsible2");
collapsibles.forEach(btn => {
  btn.addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    content.style.display = content.style.display === "block" ? "none" : "block";
  });
});

这样能减少代码冗余，后续维护也更省心~

备注：内容来源于stack exchange，提问作者Hannah Broom