本文旨在解决在嵌套折叠面板中，子折叠面板展开时无法正确推动下方内容的问题。通过修改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: ' 02B'; /* '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加载完成后执行，例如将其放在
以上就是解决嵌套折叠面板内容无法正确展开的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517443.html
微信扫一扫 
支付宝扫一扫 
