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

一個簡單的解決方案..

您的問題是您要從所有人中刪除“ 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>