如何在手風琴中添加小節，並且一次只能折疊一個小節？
[英]How do I add subsections to accordion and only have one section collapsible at any one time?
問題描述
我正在嘗試創建一個可在我的網站中使用的手風琴，並且正在嘗試實現兩件事：
1）我只希望一次擴展一個部分，例如，如果“簡介”被擴展，則在選擇“客戶”或“商業”部分時它會折疊。
要實現此目的，需要向javascript中添加什么？
2）在“客戶”部分中，我試圖添加其他可折疊部分，分別稱為“單元1”，“單元2”，“單元3”等。
如何創建小節？
以上任何幫助將不勝感激。
謝謝，弗蘭克
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
我只回答了您的第一個問題，因為我認為您需要先嘗試第二個問題，然后我們才能提供幫助。 我們不想為您保留代碼：)
我基本上在onClick事件中添加了另一個for循環，以檢查是否有任何手風琴具有“活動”類，如果有，將其折疊。 我想這段代碼可以簡化。
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>
如何在動態手風琴列表上一次只打開一個手風琴項目？
[英]How do I allow only one accordion item to be open at a time on a dynamic accordion list?
單擊手風琴時，可打開的手風琴並排都展開，我如何只單擊一下打開？
[英]Openable accordions side-by-side both expand when accordion clicked, how do I have only the clicked one open?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.