JavaScript機能がトグル機能を失う

Question

このスクリプトを使用して、ターゲットIDに基づいて複数のメニューを1つ開きます。クラスは.dropdownDivです。スクリプトは、任意の.dropdownDivファイルから "show"クラスを削除した後、ターゲットとなる.dropdownDivを切り替えることができます。

問題は、.removeと.toggleが連携して動作していないことです。彼らは個々にうまく動作します。私は一日のうちに1つのdivショーをunshowに切り替えることができますが、他のボタンをクリックしてもそれを制御することはできません。私はその逆を行うことができますし、1つのボタンを別のdivを削除するが、その後、ターゲティングボタンは、それが自分のdivを削除しません。

<script type="text/javascript"> 

    document.addEventListener('DOMContentLoaded', function(event) { 
    var divs = document.querySelectorAll('.navButton'); 

    for (var i = 0; i < divs.length; i++) { 
    divs[i].addEventListener('click', showDropDown); 
    } 
    }); 

function showDropDown() { 

//un-show all dropdowns 
var containers = document.querySelectorAll('.dropdownDiv'); 
    for (var i = 0; i < containers.length; i++) { 
    containers[i].classList.remove('show'); 
    } 

// show targeted dropdown only 
var d = document.getElementById(event.target.dataset.target); 
d.classList.toggle("show"); 
console.log(d); 
} 

</script> 

Answer 1

何かを切り替えるには些細な方法、それはフラグを使用し、それをあなたが行動を打つたびに反転するので、あなたがそうのような何かを行うことができますされています

if(a) 
{//something to do} 
else 
{// another action to do} 
a = ! a; 

をので、あなたが削除することができますすべてのドロップダウンクラスを削除する代わりに、ドロップダウンをクリックします。