javascript - 为什么我的代码只在第二次点击后运行

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 将第二个点击事件注册到实际执行切换作业的元素。从函数中删除内部 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>