Функция javascript теряет способность toggle

Question

Использование этого скрипта для открытия 1 из нескольких меню на основе идентификатора цели. Класс - .dropdownDiv. Сценарий начинается с удаления класса «show» из любого .dropdownDiv, а затем позволяет пользователю переключать целевой .dropdownDiv.

Проблема в том, что .remove и .toggle не работают вместе. Они работают индивидуально просто отлично. Я могу переключать одно шоу div-unshow весь день, но нажатие других кнопок не будет контролировать его. Я могу сделать обратное и одну кнопку удалить 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; 

так, вы можете удалить щелкнув вниз, вместо удаления всех выпадающих классов.