HTML折叠组件拆分独立文件后JS失效无法折叠的问题排查

问题根源 #

你把JS文件放在<head>里加载，这时候浏览器还没渲染<body>里的按钮元素，执行document.getElementsByClassName("collapsible")会得到一个空数组，自然没法绑定点击事件，折叠功能就失效了。而CSS不受影响是因为样式表会等到DOM渲染后再应用。

两种解决办法 #

办法1：把JS引用移到body末尾

修改你的HTML，把<script>标签放到</body>前面，确保DOM元素都加载完再执行JS：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
<!-- 把JS引用移到这里 -->
<script type="text/javascript" src="./javascript.js"></script>
</body>
</html>

办法2：给JS代码加DOM加载完成监听

如果不想动HTML结构，就在JS代码外层包裹DOMContentLoaded事件，确保DOM渲染完成后再执行绑定逻辑：

document.addEventListener('DOMContentLoaded', function() {
  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";
      }
    });
  }
});

另外注意你的HTML里<div class="content">内的<p>标签未闭合，虽然不影响当前功能，但建议补上</p>避免潜在的DOM解析问题。

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