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

Question

Below code collapses and uncollapses a list of items if clicked. This all works properly but the first click doesn't seem to work and I can't see why. This only occurs when the page is newly openened or refreshed after the first 'idle' click it all works fine. I couldn't find an similar question on the internet.

Any ideas?

 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

The onClick attribute calls the tt which registers a second click event to the element that actually does the toggle job. Either remove the inner onClick property from the function or select the element using document.querySelector and attach the event to it.

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>