javascript - classList.toggle 的作用类似于 classList.add

Question

我不明白为什么我使用的 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>

Answer 1

一个简单的解决方案..

你的问题是你正在从每个人身上删除“点击”类，然后尝试切换它..最终会再次添加它..因此会出现“添加”之类的行为

所以我刚刚检查是否已经有使用变量“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>