Javascript函数无法打开嵌套可折叠
[英]Javascript function doesn't open nested collapsible
问题描述
I'm building a new html web page where I'll have nested collapsibles. 
我正在构建一个新的html网页，其中将嵌套可折叠项。 I'm using the code from W3school for it. 我正在使用W3school的代码。 I can't understand tho why when nesting collapsibles the nested one doesn't open when clicked. 我不明白为什么为什么在嵌套可折叠对象时嵌套的对象无法打开。
In my chapter 1 example when the button is clicked the collapsible becomes active and gives it's content a max height. 在我的第1章示例中，当单击按钮时，可折叠对象变为活动状态，并为其提供最大高度。 However when the chapter 1.1 becomes clicked it's collapsible becomes active and gives height to the content but the content can't be seen. 但是，当单击第1.1章时，它的可折叠状态变为活动状态，并为内容提供了高度，但是看不到内容。
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) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }
/* Style article page content */ #main { background: #F4F4F4; margin: 0 auto; max-width: 1024px; } #page { margin-top: 5em; background-color: white; padding: 15px 3em 15px 3em; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .content { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div id="main"> <p>Article 1</p> <button class="collapsible">Abstract</button> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet. Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis, id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc, at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie, tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p> </div> <button class="collapsible">Introduction</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Chapter 1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="collapsible">Chapter 1.1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </body> </html>
2 个解决方案
解决方案1
0 2019-01-13 21:00:00
I see problem with your max-height in last collapsible there is fixed max-height set when you opening it. 我看到您的最大高度在最后可折叠时出现问题，打开时设置了固定的最大高度。 When opening child collapsible there is not enough space for child to be opened. 打开可折叠儿童时，没有足够的空间可打开儿童。 I have changed code to fixed 300px max-height and it works as expected. 我已经将代码更改为固定的300px max-height，并且可以按预期工作。 You should calculate max-height different to take into consideration also child elements. 您应计算不同的最大高度，以同时考虑子元素。
You can use max-height to set to some value larger than your content to have it always work. 您可以使用max-height设置一些大于内容的值，以使其始终起作用。 See options to animate from max-height:0 to max-height:auto here: How can I transition height: 0; 在此处查看将动画从max-height：0设置为max-height：auto的选项： 如何转换高度：0; to height: auto; 达到高度：自动； using CSS? 使用CSS？
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) { content.style.maxHeight = null; } else { content.style.maxHeight = "300px"; } }); }
/* Style article page content */ #main { background: #F4F4F4; margin: 0 auto; max-width: 1024px; } #page { margin-top: 5em; background-color: white; padding: 15px 3em 15px 3em; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .content { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div id="main"> <p>Article 1</p> <button class="collapsible">Abstract</button> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet. Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis, id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc, at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie, tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p> </div> <button class="collapsible">Introduction</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Chapter 1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="collapsible">Chapter 1.1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </body> </html>
解决方案2
0 已采纳 2019-01-13 21:10:02
The reason your are not seeing the content of chapter 1.1 is because the max-height of the parent collapsible. 您看不到第1.1章的内容的原因是，父级的最大高度可折叠。 You may need to consider change the parent max-height when the case applies. 在这种情况下，您可能需要考虑更改父级的最大高度。
Next you can see an example on the JS. 接下来，您可以在JS上看到一个示例。
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) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; if (content.parentElement.className == "content") { let parent = content.parentElement; let parentHeight = parent.style.getPropertyValue("max-height").replace("px"); let newParentHeight = parseInt(parentHeight) + parseInt(content.scrollHeight); parent.style.setProperty("max-height", `${newParentHeight}px`); } } }); }
/* Style article page content */ #main { background: #F4F4F4; margin: 0 auto; max-width: 1024px; } #page { margin-top: 5em; background-color: white; padding: 15px 3em 15px 3em; } .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .collapsible:after { content: '\\002B'; color: white; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\\2212"; } .content { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="jquery-3.3.1.min.js"></script> </head> <body> <div id="main"> <p>Article 1</p> <button class="collapsible">Abstract</button> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet. Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis, id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc, at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie, tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p> </div> <button class="collapsible">Introduction</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="collapsible">Chapter 1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <button class="collapsible">Chapter 1.1</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript 默认打开可折叠 css 过渡在第一次单击时不起作用 - Javascript default open collapsible css transition doesn't work on first click
Javascript 嵌套可折叠 div - Javascript nested collapsible divs
实现可折叠的内部模态不会保持打开状态 - Materialize collapsible inside modal doesn't remain open
Javascript-嵌套函数不调用存根函数 - Javascript - Nested function doesn't call stubbed function
为什么嵌套函数不会成为 javascript 中外部函数的属性？ - Why the nested function doesn't becomes the property of the outer function in javascript?
将Javascript注册为动态嵌套可折叠 - Register Javascript to Dynamic Nested Collapsible
Javascript可折叠面板默认情况下处于打开状态 - Javascript collapsible panel open by default
可折叠式不适用于Ajax - Collapsible doesn't work with Ajax
为什么我的可折叠按钮不折叠？ - Why my collapsible button doesn’t collapse?
Javascript中的嵌套检查不起作用 - Nested check in Javascript doesn't work
相关标签