メニュー内のサブメニュー項目を切り替えるには

Question

正しく動作するには次のコードを取得できません。 私は簡単なメニューを持っています。 項目の1つにサブメニューが含まれています。 アイテムをクリックすると、折りたたんで展開したいと思います。 何らかの理由で、最初のサブアイテムをアンコルサイズし、残りのサブアイテムをアンコラプスしません。 私は似たようなスレッドを見つけることができませんでした、なぜ私はここで私の質問を掲げています。

すべてのヘルプはあなたがあなたのpanel.style.overflowプロパティを切り替える必要がある

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

歓迎です。働い

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>