折叠屏下半截发黑最简单三个步骤 折叠屏下半部分失灵处理方法

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

在实现折叠面板时，我们通常使用JavaScript来控制元素的max-he ight属性，从而实现展开和收起的动画。当折叠面板在展开的时候，简单地设置max-height为scrollHeight可能无法计算正确内部元素的高度，导致子折叠面板展开时，下部的兄弟元素正确地促进效果。解决方案没有被正确计算所有需要展开的元素的高度，包括隐藏的子元素。以下是一个修改后的JavaScript代码示例，它能够正确处理折叠面板的展开和收起：var allHeights = 0；var内容 = document.getElementsByClassName(“；collapsible-container”；)；var j；for (j = 0； j lt； contents.length； j ) { var h = document.getElementsByClassName(“；collapsible-container”；)[j].scrollHeight； allHeights = h；}var coll = document.getElementsByClassName(“；collapsible”；)；var i；for (i = 0； i lt； 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类的元素（即折叠面板的头部）。

然后，为每个头部添加一个点击事件监听器。切换展开/收起：在事件监听器中，首先使用this.classList.toggle("active")切换当前头部元素的活动类。该类通常用于改变头部的样式，以指示其展开或收起状态。设置max-height：然后，获取当前头部的下一个兄弟元素（即折叠面板的内容区域），并检查其maxHeight属性。如果maxHeight等于之前计算的allHeights "px"，则说明当前面板是展开的，需要将其展开，所以将maxHeight设置为"0px"。否则，说明当前面板是展开的，需要将其展开，所以将maxHeight设置为"px"。

完整的HTML和CSS代码示例

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

HTML：lt；div class=quot；appquot；gt； lt；main class=quot；contentquot；gt； lt；h1gt；主标题lt；/h1gt；lt；button class=quot；collapsiblequot；gt；Header 1lt；/buttongt； lt；div class=”；可折叠容器”；gt； lt；img class=”；”；scr=”；quot； alt=”；图像 1”； style=”；宽度：200px；高度：200px；”；gt； lt；/divgt； lt；按钮 class=”；可折叠”；gt；标题 2lt；/buttongt； lt；div类=“；可折叠容器”；gt；lt；div class=quot；collapsible-contentquot；gt； 主要内容将写在此处 lt；/divgt； lt；button class=quot；collapsiblequot；gt；子标题lt；/buttongt； lt；div class=quot；collapsible-containerquot；gt； lt；img class=quot；quot； scr=quot；.quot； alt=quot；图片2quot； style=quot；width：200px；height：200px；quot；gt； lt；/divgt； lt；/divgt； lt；button class=quot；collapsiblequot；gt；标题3lt；/buttongt； lt；div class=quot；collapsible-containerquot；gt； lt；img class=quot；quot； scr=quot；quot； alt=quot；图片1quot； style=quot；width：200px；height：200px；quot；gt； lt；/divgt； lt；/maingt；lt；/divgt；登录后复制

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；}.c

ollapsible-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： 粗体； float： right； margin-left： 5px；}.active：after { content： quot；\2212quot；； /* 减号 (-) */}登录后复制

注意事项：确保CSS中的.collapsible-container类设置了溢出：隐藏；，这样才能隐藏超出max-height的内容。transition： max-height 0.2s缓出；属性可以为展开和收起动画添加平滑的过渡效果。根据实际需求调整CSS样式，例如颜色、字体、内边距等。确保JavaScript代码在DOM加载完成后执行，例如将其放在lt上；/bodygt；标签，或者使用DOMContentLoaded事件监听器。总结

通过计算所有子元素的高度，放置其父面板的展开高度，可以有效地解决内容解锁之前折叠面板无法正确展开的问题。 本文提供的代码示例和解释，可以帮助开发者理解并实现折叠面板的正确展开和收起功能。在实际应用中，可以根据具体需求进行调整和优化。

以上就是解决预设折叠面板内容无法正确展开的问题的详细内容，更多请关注乐哥常识网其他相关文章文章！