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

Question

[Dallas15]

Добрый день. Нужна помощь. Я верстальщик, делаю тестовое задание. Нужно сделать кое-что на 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 . Стили слетели, но суть, я думаю, ясна.
Спасибо за советы

Answer 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.

Comments

[Dallas15]

Спасибо, за ответ. Попробовал, при клике на кнопки, работает все как надо, только при клике на пустое место не закрывает

[Dallas15]

Еще нашел баг, не закрывает при клике на кнопку родителя

[szQocks]

Dallas15,

const dropDownBtns = document.querySelectorAll('.dropdown__btn');
const dropDowns = document.querySelectorAll('.filter__dropdown');
const product = document.querySelector('.product');

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

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

product.addEventListener('click', removeAllActive);

При клике на блок с классом product, все родители кнопок будут терять класс активности
то есть, все элементы с классом .filter__dropdown

Сейчас должно всё работать как надо. только свой jq отключи на эти кнопки и с кнопок функции убери function 1 2 3 4 и т.д

[szQocks]

Dallas15, Как проверишь , напиши что функции твои выполняли function 1 2 3 и т.д. Я тебе там допишу код что бы 1 обработчик на всё повесить а не на каждую кнопку разные функции.

[Dallas15]

szQocks, сейчас уже почти работает, но почему то не добавляет класс эктив. Через панель разработчика дописал вручную эктив, удаляет как положенно, при клике на любую кнопку, и при клике на пустое место, но не добавляет сам. Сайт собственно, чтоб было понятно как оно впринципе выглядит. JS там старый еще

[Dallas15]

Насчет функций, то это тоже с готового шаблона с этого сайта https://w3schoolsrus.github.io/howto/howto_js_drop...
Просто адаптировал под свои нужды, но он не делал того что нужно этот код, поэтому я от него отказался, а функции остались. Я их уже поудалял

[szQocks]

Dallas15, исправил

const dropDownBtns = document.querySelectorAll('.dropdown__btn');
const dropDowns = document.querySelectorAll('.filter__dropdown');
const product = document.querySelector('.product');

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

dropDownBtns.forEach(btn => {
  btn.addEventListener('click', async (e) => {
      let parent = e.target.parentNode

      if(parent.classList.contains('active')) removeAllActive();
      else{
        await removeAllActive();
        parent.classList.add('active')
      }
  })

});

product.addEventListener('click', (e) => {
  if(e.target.classList.contains('dropdown__btn')){
    return;
  }
  else{
    return removeAllActive();
  }
});

[Dallas15]

szQocks, Спасибо большое. Ты мне очень помог. Удачи тебе:)