@Dallas15

Как с помощью JS при клике на кнопках с одинаковыми классами удалять класс active с другой кнопки, добавлять только на нажатую кнопку?

Добрый день. Нужна помощь. Я верстальщик, делаю тестовое задание. Нужно сделать кое-что на JS, но JS я еще не учил, потому сам решить проблему не могу. Суть моей проблемы: есть на сайте кнопки, при нажатии на которые открываються дробдауны. На кждой кнопке свой дробдаун. Задача сделать так, чтобы при клике везде, кроме самого дробдаун, клас active удалялся у родителя кнопки или самому меню, не принципиально и меню закрывалось. Готовые решения работают, закрывают дропдаун при клике за пределами меню, но проблема в том, что кнопок отрывающих меню 6, с одинаковыми классами, и когда одно меню открыто, при нажатии на другую кнопку, открываеться еще 1 меню, и не закрывается уже открытое. Находил код, который добалял active как нужно, только 1 елементу, но не удалял при клике на пустом месте. Сейчас исполюзую такой код, который нашел здесь
$(".dropdown__btn").click(function (event) {
	event.preventDefault();
	$(this).parent().toggleClass("active");
	return false;
});

$(document).click(function (e) {
	if (!$(e.target).closest(".dropdown__menu").length) {
		$(".dropdown__menu").parent().removeClass("active");
	}
});


Здесь можно глянуть HTML код https://codepen.io/dallas1510/pen/NWjKMpG . Стили слетели, но суть, я думаю, ясна.
Спасибо за советы
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
@szQocks
const dropDownBtns = document.querySelectorAll('.dropdown__btn');
const dropDowns = document.querySelectorAll('.filter__dropdown');

const removeAllActive = () => {
	return dropDowns.forEach(item => item.classList.remove('active'));
};

dropDownBtns.forEach(btn => {
	btn.addEventListener('click', async (e) => {
		await removeAllActive();
		e.target.parentNode.classList.add('active')
	});
});


Там надо бы еще оверлей сделать , и ловить клик по нему а не по всему документу. Но пока такой код попробуй который я тебе написал. И не забудь убрать со всех кнопок функции при клике типо myFunction1() myFunction2() и т.д

document.addEventListener('click', removeAllActive)


сначала проверь код который написал первый, если всё ок , потом попробуй это дописать , но я думаю что меню все будут закрываться при любому клике куда-либо , поэтому без оверлея не обойтись.
Потом если сделаешь оверлей или кнопки при которых нужно закрывать дропдауны, я тебе допишу код на Js.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы