为什么我的代码仅在第二次单击后才能运行

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>