Как скрыть блок при повторном нажатии на javascript?

Question

[Boooom]

Всем привет

Не могу скрыть блок при повторном нажатии на javascript

<style>
    .dropdown2-content{display: none}
    .dropdown2-content.show{display: block}
</style>
<div class="dropdown2">
    <button onclick="navFunction('m1')" class="dropbtn2">Жмяк1</button>
    <div id="m1" class="dropdown2-content">
        Блок1
    </div>
</div>
<div class="dropdown2">
    <button onclick="navFunction('m2')" class="dropbtn2">Жмяк2</button>
    <div id="m2" class="dropdown2-content">
        Блок2
    </div>
</div>
<script>
    function navFunction(id) {
        var dropdowns = document.getElementsByClassName("dropdown2-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            openDropdown.classList.remove('show');
        }
        document.getElementById(id).classList.toggle('show');
    }
</script>

Подскажите как это сделать

Answer 1

[0xD34F]

Как заставить работать по-быстрому:

function navFunction(id) {
  for (const n of document.querySelectorAll('.dropdown2-content')) {
    n.classList[n.id === id ? 'toggle' : 'remove']('show');
  }
}

Но вообще, тут многое можно изменить:

Разметка - вырезать инлайновые обработчики клика и атрибуты id.

Стили - будем плясать от корневых элементов (так удобнее; кроме того, если в будущем захотите стилизовать в "открытом" дропдауне что-то кроме контента, то не будет необходимости добавлять этим элементам классы, и, соответственно, не придётся переписывать код):

.dropdown2 .dropdown2-content {
  display: none;
}

.dropdown2.show .dropdown2-content {
  display: block;
}

Код - вместо id будет смотреть на взаимное расположение элементов (переключаем класс у предка нажатой кнопки, у остальных удаляем):

const containerSelector = '.dropdown2';
const buttonSelector = `${containerSelector} .dropbtn2`;
const activeClass = 'show';


// делегирование, назначаем обработчик клика один раз для всех кнопок
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    document.querySelectorAll(containerSelector).forEach(function(n) {
      n.classList[n === this ? 'toggle' : 'remove'](activeClass);
    }, button.closest(containerSelector));
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально
const onClick = function({ currentTarget: t }) {
  this.forEach((n, i) => n.classList[n.contains(t) ? 'toggle' : 'remove'](activeClass));
}.bind(document.querySelectorAll(containerSelector));

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

Answer 2

[RAX7]

Потому что ты сначала удаляешь класс .show со всех .dropdown2-content

for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            openDropdown.classList.remove('show');
        }

А затем опять его добавляешь, но уже для нажатого элемента.

document.getElementById(id).classList.toggle('show');

https://jsfiddle.net/t1hjyc9s/

Answer 3

[Павел Корнилов]

Я бы сделал так:


https://codepen.io/KorniloFF/pen/wNWMXR?editors=1111

Тогда всё будет работать при любом количестве кнопок.