如何在手风琴中添加小节，并且一次只能折叠一个小节？
[英]How do I add subsections to accordion and only have one section collapsible at any one time?
问题描述
I am trying to create an accordion for use in my website and I am trying to achieve 2 things: 
我正在尝试创建一个可在我的网站中使用的手风琴，并且正在尝试实现两件事：
1) I only want one section to be expanded at any one time eg If "Introduction" is expanded, it collapses when I select the "Customers" or "Commercial" section. 1）我只希望一次扩展一个部分，例如，如果“简介”被扩展，则在选择“客户”或“商业”部分时它会折叠。
What needs to be added to the javascript to achieve this? 要实现此目的，需要向javascript中添加什么？
2) Within the "Customers" section I am trying to add other collapsible sections called "Unit 1", "Unit 2", "Unit 3" etc. 2）在“客户”部分中，我试图添加其他可折叠部分，分别称为“单元1”，“单元2”，“单元3”等。
How do I create a subsection? 如何创建小节？
Any help with the above would be appreciated. 以上任何帮助将不胜感激。
Thanks, Frank 谢谢，弗兰克
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }
button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h2>Frank's Accordion</h2> <p>Select a section..</p> <button class="accordion">Introduction</button> <div class="panel"> <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="accordion">Customers</button> <div class="panel"> <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="accordion">Commercial</button> <div class="panel"> <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> <script> </script> </body> </html>
1 个解决方案
解决方案1
0 2017-06-10 16:59:24
I have only answered your first question, because I think you need to make an attempt at the second question before we can help. 我只回答了您的第一个问题，因为我认为您需要先尝试第二个问题，然后我们才能提供帮助。 We don't want to right the code for you :) 我们不想为您保留代码：)
I have basically add another for loop inside the onClick event to check if any of the accordions have a class of "active" and if they do, collapse them. 我基本上在onClick事件中添加了另一个for循环，以检查是否有任何手风琴具有“活动”类，如果有，将其折叠。 I imagine this code could be simplified. 我想这段代码可以简化。
var acc = document.getElementsByClassName("accordion"); var i; // check if element has class function function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } // accordion function function accordion(element) { element.classList.toggle("active"); var panel = element.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { var acc = document.getElementsByClassName("accordion"); // loop through accordion elements again for (i = 0; i < acc.length; i++) { // check if any of the element have a class of "active" and is not the currently clicked element if ( hasClass(acc[i], "active") && acc[i] != this) { // collapse any already opened accordions accordion(acc[i]); } } // toggle clicked accordion accordion(this); } }
button.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } button.accordion.active, button.accordion:hover { background-color: #ddd; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h2>Frank's Accordion v1.1</h2> <p>Select a section..</p> <button class="accordion">Introduction</button> <div class="panel"> <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="accordion">Customers</button> <div class="panel"> <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="accordion">Commercial</button> <div class="panel"> <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> <script> </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.