JS折叠面板内容显示异常求助：内容被折叠div遮挡

看起来你遇到的是折叠内容被其他元素遮挡的层级显示问题，这通常是CSS的z-index属性或元素定位设置不当导致的。咱们一步步来解决：

问题分析 #

折叠展开的内容之所以被遮挡，是因为它的**层级（z-index）**比页面上其他元素低，或者元素本身没有设置合适的定位，导致z-index无法生效。默认情况下，静态定位的元素（position: static，浏览器默认值）的z-index是不起作用的。

解决方案 #

1. 给折叠内容添加定位和层级样式 #

找到你折叠内容对应的CSS类（比如你的代码里nextElementSibling对应的元素类，假设是.content），添加以下样式：

.content {
  position: relative; /* 让z-index生效的前提 */
  z-index: 10; /* 设置足够高的层级，确保不会被其他元素遮挡 */
  overflow: hidden; /* 配合maxHeight实现折叠动画 */
  transition: max-height 0.2s ease-out; /* 可选，添加平滑过渡效果 */
}

2. 确保折叠按钮的层级也足够高 #

为了避免点击按钮时被展开的内容遮挡，也给折叠按钮添加定位和层级：

.collapsible {
  position: relative;
  z-index: 11; /* 比内容层级高，保证按钮始终可点击 */
}

3. 优化你的JavaScript代码（可选） #

你的原有代码功能没问题，但可以换成更现代的写法，可读性更好：

const coll = document.querySelectorAll(".collapsible");
coll.forEach(button => {
  button.addEventListener("click", function() {
    this.classList.toggle("active");
    const content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      // 这里的+50可以根据你的内容 padding/margin 调整，避免内容被截断
      content.style.maxHeight = content.scrollHeight + 50 + "px";
    }
  });
});

注意事项 #

• 如果你页面上有其他设置了z-index的元素，需要确保折叠内容的z-index数值比它们高；
• 根据你实际的HTML结构调整CSS类名，比如如果内容元素的类不是.content，要替换成你自己的类名。

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