解决嵌套折叠面板内容无法正确展开的问题-小浪学习网

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

本文旨在解决在嵌套折叠面板中，子折叠面板展开时无法正确推动下方内容的问题。通过修改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: '02B';   /* 'plus' symbol (+) */   color: rgb(74, 74, 74);   font-weight: bold;   float: right;   margin-left: 5px; }  .active:after {   content: "2212";   /* 'minus' symbol (-) */ }

注意事项：