Как добавить класс элементу, на который кликнули?

Question

[Боб Семович]

Есть такой js код:

let button = document.querySelector('.item');
button .onclick = function() {
  button .classList.toggle('dropdown');
};

И такой html код:

<div class="item">
	Кнопочка1
	<div class="dropdown">
		<span>1</span>
		<span>2</span>
		<span>3</span>
	</div>
</div>

<div class="item">
	Кнопочка2
	<div class="dropdown">
		<span>1</span>
		<span>2</span>
		<span>3</span>
	</div>
</div>

В html выше есть два элемента .item (по идее их больше чем два, скажем 10).
Как сделать так, чтобы класс появлялся только у того элемента, на который я кликаю?

Answer 1

[MagicMight]

Comments

[Боб Семович]

Прекрасно! Спасибо большое! Скажите пожалуйста, а как сделать так, что бы класс убирался если кликать на любое пространство (кроме самого дропдауна)?

[MagicMight]

Comrues, повесить на страницу addEventListener, и проверять, что !e.target.classList.contains('item') и удалять со всех элементов item класс dropdown по этому событию

[Боб Семович]

MagicMight, Прости, я не селён в js. Можешь добавить в codepan.

[MagicMight]

Comrues, обновил.

[Боб Семович]

MagicMight, Супер! Спасибо большое. Я немного изменил классы, что бы всё наглядно работало (https://codepen.io/Comrues/pen/rNVPMOO). Ещё раз спасибо.

[Боб Семович]

MagicMight, Вы уже ответили на мой вопрос, но если можете подскажите ещё на счёт одного...
Что в ваш код и куда нужно добавить, чтобы сделать следующее?:
Один дропдаун уже открыт. Нужно чтоб при клике на другой дропдаун, первый закрывался.
Заранее огромное спасибо!!!

[MagicMight]

Comrues, обновил.

[Боб Семович]

MagicMight, Шииикарно! Спасибо большое!

[Боб Семович]

MagicMight, Проблемка - при клике на .item не кликает если внутри него есть ещё объекты (я так понял клик происходит не по родителю (не по .item), а по детям). Как такое можно обойти скажите пожалуйста?

[MagicMight]

Comrues, можно вешать обработчик события на сам .item, если их не слишком много, и не проверять e.target

[Боб Семович]

MagicMight, А можете обновить код в codepan, чтоб мне понять, что куда. Спасибо!

[MagicMight]

Comrues, обновил.

[Боб Семович]

Сейчас при нажатии на свободное пространство дропдаун не закрывается - https://codepen.io/Comrues/pen/rNVPMOO

[MagicMight]

Comrues, я демонстрировал, как этого можно добиться.
Так что, разберитесь сами, я уже показал все возможные манипуляции)