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

时间：2017-08-29 10:11:01

标签： javascript html css

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

1 个答案:

答案 0 :(得分：0)

一个简单的解决方案..

你的问题是你要从每个人那里删除'clicked'类，然后尝试切换它......最后再添加它...因此行为就像'add'

所以我刚刚检查了是否已经使用变量'has'

进行了“点击”课程

我在代码中添加了评论

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>

相关问题
最新问题