javascript JavaScript折叠手风琴
[英]html javascript collapse accordion
问题描述
i have an accordion inside of a side navigation window. 
我在侧面导航窗口中有一个手风琴。 If I open all the panels they stay open if i close the side navigation panel. 如果我打开所有面板，则在我关闭侧面导航面板时它们将保持打开状态。 I want my accordion to collapse when my side navigation closes. 我希望手风琴关闭时我的手风琴能合拢。 my code is attached. 我的代码已附加。
<!DOCTYPE html> <html> <head> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } 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; } button.accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } button.accordion.active:after { content: "\\2212"; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <button class="accordion">Section 1</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">Section 2</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">Section 3</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> </div> <div id="main"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } 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"; } } } </script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2017-05-25 23:53:52
You can create a function that opens/closes panels, and in closeNav() just loop through the panels and close them all. 您可以创建一个打开/关闭面板的函数，并在closeNav()循环浏览面板并将其全部关闭。
<!DOCTYPE html> <html> <head> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } 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; } button.accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } button.accordion.active:after { content: "\\2212"; } div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <button class="accordion">Section 1</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">Section 2</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">Section 3</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> </div> <div id="main"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; for (i = 0; i < acc.length; i++) { closePanel(acc[i]); } } function openPanel(el) { el.classList.add("active"); el.nextElementSibling.style.maxHeight = el.nextElementSibling.scrollHeight + "px"; } function closePanel(el) { el.classList.remove("active"); el.nextElementSibling.style.maxHeight = null; } for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { if (this.classList.contains("active")) { closePanel(this); } else { openPanel(this); } }; } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 CSS 和 JavaScript 创建 HTML 折叠手风琴 - Creating an HTML collapse accordion with CSS and JavaScript
HTML JS手风琴折叠其余的并警告活动的 - HTML JS Accordion to collapse the remaining and alert the active
javascript 允许我折叠扩展的手风琴 - javascript to allow me to collapse accordion that is extended
Javascript 手风琴在新标签打开时折叠 - Javascript accordion collapse on new tab open
如何使用 javascript 展开和折叠模板手风琴？ - How to expand and collapse template accordion using javascript?
Javascript 手风琴折叠打开新标签 - Javascript accordion collapse on new tab opened
Javascript手风琴-选择一项时折叠其他部分 - Javascript Accordion - collapse other sections when one selected
如何使用 Javascript 折叠垂直手风琴中的所有选项卡 - How can I collapse all tabs in a vertical accordion with Javascript
如何使用嵌套JavaScript手风琴折叠所有负载 - How do I collapse all on load with a nested JavaScript accordion
使用Java脚本更改字体真棒图标-展开/折叠手风琴 - Change Font Awesome Icon with Javascript - Expand/Collapse Accordion
相关标签