javascript - classList.toggle的行为类似于classList.add

我不明白为什么我使用的classList.toggle会像classList.add那样起作用。当我单击具有下拉菜单的列表项时，它仅在第一次单击时进行更改，而在第二次单击时不进行任何更改。

var query = document.querySelector.bind(document);

var hasSubmenu = query('.basic-dropdown-click').querySelectorAll('.has-submenu');

hasSubmenu.forEach(function(item) {
  item.addEventListener('click', function() {

    for(var i=0; i < this.parentNode.children.length; i++) {
      this.parentNode.children[i].classList.remove('clicked');
    }

    this.classList.toggle('clicked');
  })
})

.basic-dropdown-click {
  display: table;
  margin: 2rem auto 0 auto;
}
.basic-dropdown-click > li {
  width: 120px;
  list-style-type: none;
  display: table-cell;
  background: #555;
  border-left: 1px solid #444;
  position: relative;
  cursor: pointer;
}
.basic-dropdown-click > li:hover {
  background: #484848;
}
.basic-dropdown-click > li:nth-child(2), .basic-dropdown-click > li:nth-child(5) {
  text-align: center;
  color: #aaa;
  padding: 1rem 0;
  font: 0.9rem 'Roboto';
}
.basic-dropdown-click > li:nth-child(2).clicked, .basic-dropdown-click > li:nth-child(5).clicked {
  background: #484848;
}
.basic-dropdown-click > li:nth-child(2).clicked > ul, .basic-dropdown-click > li:nth-child(5).clicked > ul {
  display: block;
}
.basic-dropdown-click > li:nth-child(2) > ul, .basic-dropdown-click > li:nth-child(5) > ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0;
  display: none;
}
.basic-dropdown-click > li:nth-child(2) > ul > li, .basic-dropdown-click > li:nth-child(5) > ul > li {
  list-style-type: none;
  background: #555;
}
.basic-dropdown-click > li:nth-child(2) > ul > li:hover, .basic-dropdown-click > li:nth-child(5) > ul > li:hover {
  background: #484848;
}
.basic-dropdown-click > li:nth-child(2) > ul > li:not(:first-child), .basic-dropdown-click > li:nth-child(5) > ul > li:not(:first-child) {
  border-top: 1px solid #444;
}
.basic-dropdown-click > li:nth-child(2) > ul > li a, .basic-dropdown-click > li:nth-child(5) > ul > li a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #aaa;
  padding: 1rem 0;
  font: 0.9rem 'Roboto';
}
.basic-dropdown-click > li > a {
  display: block;
  text-align: center;
  text-decoration: none;
  font: 0.9rem 'Roboto';
  color: #aaa;
  padding: 1rem 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<ul class="basic-dropdown-click">
      <li><a href="">Item 1</a></li>
      <li class="has-submenu">Item 2 <i class="fa fa-caret-down"></i>
        <ul class="item-2-submenu">
          <li><a href="">Submenu 1</a></li>
          <li><a href="">Submenu 2</a></li>
          <li><a href="">Submenu 3</a></li>
          <li><a href="">Submenu 4</a></li>
        </ul>
      </li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li class="has-submenu">Item 5 <i class="fa fa-caret-down"></i>
        <ul class="item-5-submenu">
          <li><a href="">Submenu 1</a></li>
          <li><a href="">Submenu 2</a></li>
          <li><a href="">Submenu 3</a></li>
          <li><a href="">Submenu 4</a></li>
        </ul>
      </li>
    </ul>

最佳答案

一个简单的解决方案..

您的问题是您要从所有人中删除“ clicked”类，然后尝试切换它。.最终导致再次添加它..因此，行为类似于“ add”

所以我刚刚使用变量“ has”检查了是否已经有“ clicked”类

我在代码中添加了注释

var query = document.querySelector.bind(document);

var hasSubmenu = query('.basic-dropdown-click').querySelectorAll('.has-submenu');

hasSubmenu.forEach(function(item) {
  item.addEventListener('click', function() {
    // check if drop down was open
    var has = this.classList.contains('clicked');

    for(var i=0; i < this.parentNode.children.length; i++) {
      this.parentNode.children[i].classList.remove('clicked');
    }
    // note that after above loop no element have 'clicked' class
    // so if there was no 'clicked' class earlier add it
    if(!has){
      this.classList.add('clicked');
    }
  })
})

.basic-dropdown-click {
  display: table;
  margin: 2rem auto 0 auto;
}
.basic-dropdown-click > li {
  width: 120px;
  list-style-type: none;
  display: table-cell;
  background: #555;
  border-left: 1px solid #444;
  position: relative;
  cursor: pointer;
}
.basic-dropdown-click > li:hover {
  background: #484848;
}
.basic-dropdown-click > li:nth-child(2), .basic-dropdown-click > li:nth-child(5) {
  text-align: center;
  color: #aaa;
  padding: 1rem 0;
  font: 0.9rem 'Roboto';
}
.basic-dropdown-click > li:nth-child(2).clicked, .basic-dropdown-click > li:nth-child(5).clicked {
  background: #484848;
}
.basic-dropdown-click > li:nth-child(2).clicked > ul, .basic-dropdown-click > li:nth-child(5).clicked > ul {
  display: block;
}
.basic-dropdown-click > li:nth-child(2) > ul, .basic-dropdown-click > li:nth-child(5) > ul {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0;
  display: none;
}
.basic-dropdown-click > li:nth-child(2) > ul > li, .basic-dropdown-click > li:nth-child(5) > ul > li {
  list-style-type: none;
  background: #555;
}
.basic-dropdown-click > li:nth-child(2) > ul > li:hover, .basic-dropdown-click > li:nth-child(5) > ul > li:hover {
  background: #484848;
}
.basic-dropdown-click > li:nth-child(2) > ul > li:not(:first-child), .basic-dropdown-click > li:nth-child(5) > ul > li:not(:first-child) {
  border-top: 1px solid #444;
}
.basic-dropdown-click > li:nth-child(2) > ul > li a, .basic-dropdown-click > li:nth-child(5) > ul > li a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #aaa;
  padding: 1rem 0;
  font: 0.9rem 'Roboto';
}
.basic-dropdown-click > li > a {
  display: block;
  text-align: center;
  text-decoration: none;
  font: 0.9rem 'Roboto';
  color: #aaa;
  padding: 1rem 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<ul class="basic-dropdown-click">
      <li><a href="">Item 1</a></li>
      <li class="has-submenu">Item 2 <i class="fa fa-caret-down"></i>
        <ul class="item-2-submenu">
          <li><a href="">Submenu 1</a></li>
          <li><a href="">Submenu 2</a></li>
          <li><a href="">Submenu 3</a></li>
          <li><a href="">Submenu 4</a></li>
        </ul>
      </li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li class="has-submenu">Item 5 <i class="fa fa-caret-down"></i>
        <ul class="item-5-submenu">
          <li><a href="">Submenu 1</a></li>
          <li><a href="">Submenu 2</a></li>
          <li><a href="">Submenu 3</a></li>
          <li><a href="">Submenu 4</a></li>
        </ul>
      </li>
    </ul>

关于javascript - classList.toggle的行为类似于classList.add，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45936386/