Как сделать, чтобы кнопки с одинаковым class не срабатывали все сразу по click в javascript?

Question

[Uzumeti]

Привет! Продолжаю мучать меню Вордпресс. Помогите пожалуйста. Есть ли какое-то простое решение?

Задача такая - нужно по первому нажатию на кнопку меню открывать подменю, а по второму закрывать. Подготовил простенький код. Всё срабатывает. Но именно, что ВСЁ. Срабатывают сразу все кнопки с одинаковым class. Или происходит неведомый глюк. Догадываюсь, что проблема в одинаковом class у всех кнопок. Но не делать же на каждую кнопку свой класс 0_о

const btn = document.querySelectorAll('.menu88'); /*Нашёл все кнопки с таким классом*/
const content = document.querySelector(".sub-menu"); /*Выбрал, что прятать*/

btn.forEach((element) => {
    element.addEventListener('click', (event) => {     /*Событие на кнопках*/
        btnClick(event);
    });
	
	element.removeEventListener('click', (event));  /* Не знаю для чего, думал может поможет удалить EventListner)) Но не помогает.*/
	
});	
	
function btnClick(event) /*Функция при нажатии*/


{ 	 
	let x = document.getElementsByClassName('sub-menu')[0];
	      if (x.style.display == "block"){
	  x.style.display = "none";
	  } else {
	 x.style.display = "block"}
    
};

Comments

[ProjectSoft]

Срабатывают сразу все кнопки с одинаковым class. Или происходит неведомый глюк.

И правильно делает))) Вы же ищите в document, а надо искать .sub-menu только для той кнопки, к которой привязано данное субменю.
Код html разметки бы посмотреть...

[Uzumeti]

ProjectSoft, Спасибо )Разметка там вордпрессовская стандартная) А как так? Если искать в submenu, то я не найду эту кнопку. Но всё равно даже если так, всё будет в одном общем модуле.

.submenu - это класс выпадающего меню, где находятся элементы подменю. Как раз его я скрываю и открываю) Но скрываются-открываются все. Разметку я бы показал, но не знаю, как её выцепить))

[Stalker_RED]

Uzumeti, Зачем эти навешивания обработчиков при клике?
Пользователь откроет меню, обработчики добавятся, он откороет меню еще пару раз, и уже по клику три одинаковых обработчика, и они все одновремено будут срабатывать. Что вы вообще пытаетесь сделать?

[ProjectSoft]

Разметку я бы показал, но не знаю, как её выцепить

Т. е инструмент Разработчика у вас в браузере недоступен? Он есть в любом браузере.
Открываете, выбираете меню, копируете, приводите код в порядок (форматируете) и показываете здесь в тегах

<code lang="html">
<!-- Ваш HTML код -->
</code>

Если искать в submenu, то я не найду эту кнопку

Чушь))) Вы всё можете найти.
element.querySelector('class,id,tag');
Поняли к чему я?

[ArturMavlidov]

Покажи что внутри функции btnClick