為什么我的代碼僅在第二次單擊后才能運行

Question

如果單擊下面的代碼，則折疊並取消折疊項目列表。 一切正常，但是第一次單擊似乎無效，我看不出原因。 僅在第一次單擊“空閑”后重新打開或刷新頁面時，才可以正常工作。 我在互聯網上找不到類似的問題。

有任何想法嗎？

 function tt(e) { e.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"; } } } 

 @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .float-right { float: right; } .c-menu-item li.open .material-icons { } ul.c-menu-item .material-icons { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); transition: transform 0.3s ease; } ul.c-menu-item.active .material-icons { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); transition: transform 0.3s ease; } .c-menu { margin: 30px ; padding: 0; width: 300px; border-top: 1px solid #CBCBCB; border-left: 1px solid #CBCBCB; border-right: 1px solid #CBCBCB; } .c-menu-item { list-style-type: none; background-color: #eee; color: #444; cursor: pointer; padding: 5px; width: 100%; border: none; border-bottom: 1px solid #CBCBCB; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } ul.c-menu-item.active, ul.c-menu-item:hover { background-color: #ddd; } .c-submenu { list-style: none; margin: 0; padding: 0; } .c-submenu li { border-bottom: 1px solid #CBCBCB; padding: 5px; cursor: pointer; } .c-submenu li:hover { background-color: orange; } .c-panel { background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <div class='c-menu'> <ul class="c-menu-item">Section 1</ul> <ul class="c-menu-item js-collapse" onclick='tt(this)'>Section 2 <i class="material-icons float-right" >keyboard_arrow_down</i> </ul> <ul class="c-submenu c-panel"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <ul class="c-menu-item">Section 3</ul> </div> 

Answer 1

onClick屬性調用tt ，該tt將第二個click事件注冊到實際執行切換工作的元素。 從函數中刪除內部的onClick屬性，或使用document.querySelector選擇元素並將事件附加到該元素。

function tt(e) {

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

}

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

 @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .float-right { float: right; } .c-menu-item li.open .material-icons { } ul.c-menu-item .material-icons { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); transition: transform 0.3s ease; } ul.c-menu-item.active .material-icons { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); transition: transform 0.3s ease; } .c-menu { margin: 30px ; padding: 0; width: 300px; border-top: 1px solid #CBCBCB; border-left: 1px solid #CBCBCB; border-right: 1px solid #CBCBCB; } .c-menu-item { list-style-type: none; background-color: #eee; color: #444; cursor: pointer; padding: 5px; width: 100%; border: none; border-bottom: 1px solid #CBCBCB; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } ul.c-menu-item.active, ul.c-menu-item:hover { background-color: #ddd; } .c-submenu { list-style: none; margin: 0; padding: 0; } .c-submenu li { border-bottom: 1px solid #CBCBCB; padding: 5px; cursor: pointer; } .c-submenu li:hover { background-color: orange; } .c-panel { background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <div class='c-menu'> <ul class="c-menu-item">Section 1</ul> <ul class="c-menu-item js-collapse" onclick='tt(this)'>Section 2 <i class="material-icons float-right" >keyboard_arrow_down</i> </ul> <ul class="c-submenu c-panel"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <ul class="c-menu-item">Section 3</ul> </div>