解决嵌套折叠面板内容无法正确展开的问题-js教程-PHP中文网

解决嵌套折叠面板内容无法正确展开的问题

DDD

发布： 2025-08-23 22:54:01

原创

539人浏览过

解决嵌套折叠面板内容无法正确展开的问题

本文旨在解决在嵌套折叠面板中，子折叠面板展开时无法正确推动下方内容的问题。通过修改JavaScript代码，计算所有子元素的高度，并将其应用于父折叠面板的展开高度，从而实现嵌套折叠面板的正确展开和收起功能。本文提供了详细的代码示例和解释，帮助开发者理解和解决此类问题。

理解问题

在实现折叠面板时，我们通常使用JavaScript来控制元素的max-height属性，从而实现展开和收起的动画效果。当折叠面板是嵌套的时，简单地设置max-height为scrollHeight可能无法正确计算内部元素的高度，导致子折叠面板展开时，下方的兄弟元素没有被正确地向下推动。

解决方案

解决此问题的关键在于正确计算所有需要展开的元素的高度，包括嵌套的子元素。以下是一个修改后的JavaScript代码示例，它能够正确处理嵌套折叠面板的展开和收起：

var allHeights = 0;
var contents = document.getElementsByClassName("collapsible-container");
var j;

for (j = 0; j < contents.length; j++) {
  var h = document.getElementsByClassName("collapsible-container")[j].scrollHeight;
  allHeights += h;
}

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

登录后复制

代码解释：

计算所有子元素的高度： 首先，通过document.getElementsByClassName("collapsible-container")获取所有具有collapsible-container类的元素。然后，遍历这些元素，并将其scrollHeight累加到allHeights变量中。scrollHeight属性包含了元素内容的高度，即使内容超出了元素的可视区域。
添加事件监听器： 接下来，通过document.getElementsByClassName("collapsible")获取所有具有collapsible类的元素（即折叠面板的头部）。然后，为每个头部添加一个click事件监听器。
切换展开/收起状态： 在事件监听器中，首先使用this.classList.toggle("active")切换当前头部元素的active类。这个类通常用于改变头部的样式，以指示其展开或收起状态。
设置max-height： 然后，获取当前头部元素的下一个兄弟元素（即折叠面板的内容区域），并检查其maxHeight属性。
- 如果maxHeight等于之前计算的allHeights + "px"，则说明当前面板是展开的，需要将其收起，所以将maxHeight设置为"0px"。
- 否则，说明当前面板是收起的，需要将其展开，所以将maxHeight设置为allHeights + "px"。

完整的HTML和CSS代码示例

为了更好地理解和使用上述JavaScript代码，以下提供完整的HTML和CSS代码示例：

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

HTML:

<div class="app">
  <main class="content">

    <h1>Main Title</h1>
    <button class="collapsible">Header 1</button>
    <div class="collapsible-container">
      <img class="" scr="" alt="Image 1" style="width:200px;height:200px;">
    </div>

    <button class="collapsible">Header 2</button>
    <div class="collapsible-container">
      <div class="collapsible-content"> Main content will be written here
      </div>

      <button class="collapsible">sub header</button>
      <div class="collapsible-container">
        <img class="" scr="." alt="Image 2" style="width:200px;height:200px;">
      </div>
    </div>

    <button class="collapsible">Header 3</button>
    <div class="collapsible-container">
      <img class="" scr="" alt="Image 1" style="width:200px;height:200px;">
    </div>
  </main>
</div>

登录后复制

CSS:

.app {
  display: flex;
  min-height: 100vh;
}

.content {
  flex-grow: 1;
  padding: 50px 0 50px 75px;
}

.collapsible-content {
  padding: 20px 28px;
  transition: max-height 0.2s ease-out;
  background-color: none;
  float: none;
}

.collapsible-container {
  max-height: 0;
  width: 75%;
  overflow: hidden;
  padding: none;
  transition: max-height 0.2s ease-out;
  background-color: none;
  float: none;
}

.collapsible {
  background-color: rgb(218, 228, 238);
  color: rgb(84, 84, 84);
  cursor: pointer;
  padding: 18px;
  width: 75%;
  text-align: left;
  text-indent: 20px;
  letter-spacing: 1px;
  outline: none;
  font-size: 18px;
  border: 1px solid white;
  float: top;
}

.active,
.collapsible:hover {
  background-color: rgb(175, 186, 197);
  color: white;
}

.collapsible:after {
  content: '\002B';
  /* 'plus' symbol (+) */
  color: rgb(74, 74, 74);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
  /* 'minus' symbol (-) */
}

登录后复制

注意事项：