本文旨在解决在嵌套折叠面板中，子折叠面板展开时无法正确推动下方内容的问题。通过修改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:
Main Title
@@##@@Main content will be written here@@##@@@@##@@
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 (-) */
}注意事项：
- 确保CSS中的.collapsible-container类设置了overflow: hidden;，这样才能隐藏超出max-height的内容。
- transition: max-height 0.2s ease-out;属性可以为展开和收起动画添加平滑的过渡效果。
- 根据实际需求调整CSS样式，例如颜色、字体、内边距等。
- 确保JavaScript代码在DOM加载完成后执行，例如将其放在
