如何在菜單中切換子菜單項

Question

我無法使以下代碼正常工作。 我有一個簡單的菜單。 其中一項包含一個子菜單。 我希望它在單擊該項目時可以折疊和展開。 由於某種原因，它只會使第一個子項目崩潰，而不會破壞其他子項目。 我找不到類似的線程，這就是為什么我在這里提出問題。

歡迎所有幫助

 function toggleSubmenu(e) { e.classList.toggle("active"); var panel = e.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } 

 .c-menu { position: absolute; width: 200px; margin: 0px; padding: 0; background-color: #fff; border-left: 1px solid #CBCBCB; border-right: 1px solid #CBCBCB; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .c-menu ul { list-style-type: none; background-color: #fff; color: #444; cursor: pointer; padding: 5px; width: 100%; height: 35px; border: none; border-bottom: 1px solid #CBCBCB; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .c-menu ul.active, .c-menu ul:hover { background-color: #EAEAEA; } .c-submenu { list-style: none; margin: 0; padding: 0; } .c-submenu li { border-bottom: 1px solid #CBCBCB; height: 35px; font-size: 14px; padding: 10px 0 0 39px; cursor: pointer; } .c-submenu li:hover { background-color: #EAEAEA; } .c-panel { background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='c-menu'> <ul>A</ul> <ul>B</ul> <ul>C</ul> <ul onclick='toggleSubmenu(this)'>OPEN</ul> <ul class="c-submenu c-panel"> <li>AA</li> <li>BB</li> <li>CC</li> <li>DD</li> </ul> </div> 

Answer 1

您需要切換panel.style.overflow屬性。

 function toggleSubmenu(e) { e.classList.toggle("active"); var panel = e.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; panel.style.overflow = "hidden"; } else { panel.style.maxHeight = panel.scrollHeight + "px"; panel.style.overflow = "visible"; } } 

 .c-menu { position: absolute; width: 200px; margin: 0px; padding: 0; background-color: #fff; border-left: 1px solid #CBCBCB; border-right: 1px solid #CBCBCB; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } .c-menu ul { list-style-type: none; background-color: #fff; color: #444; cursor: pointer; padding: 5px; width: 100%; height: 35px; border: none; border-bottom: 1px solid #CBCBCB; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .c-menu ul.active, .c-menu ul:hover { background-color: #EAEAEA; } .c-submenu { list-style: none; margin: 0; padding: 0; } .c-submenu li { border-bottom: 1px solid #CBCBCB; height: 35px; font-size: 14px; padding: 10px 0 0 39px; cursor: pointer; background-color: white; } .c-submenu li:hover { background-color: #EAEAEA; } .c-panel { background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='c-menu'> <ul>A</ul> <ul>B</ul> <ul>C</ul> <ul onclick='toggleSubmenu(this)'>OPEN</ul> <ul class="c-submenu c-panel"> <li>AA</li> <li>BB</li> <li>CC</li> <li>DD</li> </ul> </div>