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

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) { 
 
\t \t e.classList.toggle("active"); 
 
\t \t var panel = e.nextElementSibling; 
 
\t \t if (panel.style.maxHeight) { 
 
\t \t \t panel.style.maxHeight = null; 
 
     panel.style.overflow = "hidden"; 
 
\t \t } else { 
 
\t \t \t panel.style.maxHeight = panel.scrollHeight + "px"; 
 
     panel.style.overflow = "visible"; 
 
\t \t } 
 
\t }

.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>