При клике на блок внутри него должен появиться класс, как?

Question

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

У меня есть несколько ссылок при нажатии на которые появляется дропдаун.
Классы у всех ссылок и дропдаунов одинаковые.
Мне нужно что бы при клике на блок, добавлялся класс к блоку на КОТОРЫЙ КЛИКАЮ
Структура кода такая:

<div class="item">
	<span>Ссылка</span>
	<ul class="dropdawn">
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

Т.е. нужно чтоб при клике на "item" к нему же и добавлялся класс .open
Этот же класс должен убираться при клике на блок "item" или при клике на всё остальное пространство (кроме клика на сам дропдаун).
Решение нужно либо на чистом js, либо на vue.js

Comments

[Rsa97]

И что вы уже сделали? Что именно у вас не получается? Пока что это не вопрос, а задание. С заданиями - на Фрилансим.

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

Rsa97,
Две вещи не получаются.
Во первых как сделать так чтоб класс удалялся при клике на любое пространство, кроме самого дропдауна
Во вторых как добавить класс только к тому блоку на который кликнул. (я знаю как добавить класс к другому классу при клике, но как добавить класс к блоку на который кликаю не знаю). Заранее спасибо!

[Rsa97]

Comrues, 1. Повесить обработчик нажатия на body и проверять, что нажатие было не не дропдауне.
2. В каллбэк клика первым параметром передаётся событие. У него есть свойство target - элемент, который вызвал событие.
https://developer.mozilla.org/ru/docs/Web/API/Even...

[Alex]

Rsa97, Оформите это в ответ

Answer 1

[Арсений Матыцин]

Чтобы добавлять\менять классы, используй toggleClass('class')\addClass('class')\removeClass('class').

А чтобы реализовать missclick, обратись к документации про всплытие и перехват событий.