js выпадающие меню

Question

Есть у меня такой код, при нажатии выпадает меню, но меню у меня не 1шт, а 3шт. Нужно сделать так, что бы выпадало только одно меню, на кнопку которого я нажимаю, а не все 3. Вручную писать каждому свой класс или id не удобно ибо меню может быть и 10 в будущем.

        const input = document.querySelectorAll('.input');
        const sub = document.querySelectorAll('.sub');
        const subCheck = document.querySelector('.sub div input');
        const blockThre = document.querySelector('.block3');


        function gg(e) {
            e.addEventListener('click', () => {
                sub.forEach((e)=> {
                    e.classList.toggle('active');
                })
            })
        }
        input.forEach(gg);

Answer 1

1. на всякий случай насчем со стокового уродства<br>
<select>
  <option>item 1</option>
  <option>item 2</option>
  <option>item 3</option>
</select><br><br>

2. может спойлер?<br>
<style>
input, input:not(:checked) ~ .sub{display: none;}
</style>
<label>
    <input type='checkbox'>
    <b>menu name</b>
    <div class='sub'>item 1</div>
    <div class='sub'>item 2</div>
    <div class='sub'>item 3</div>
</label><br><br>

3. target tabs?<br>
<style>
.menu:not(:target){display: none;}
</style>
<a href='#menu1'>name 1</a>
<a href='#menu2'>name 2</a>
<a href='#menu3'>name 3</a>
<div class='menu' id='menu1'>
<b>item1.1</b>
<b>item1.2</b>
<b>item1.3</b>
</div>
<div class='menu' id='menu2'>
<b>item2.1</b>
<b>item2.2</b>
<b>item2.3</b>
</div>
<div class='menu' id='menu3'>
<b>item3.1</b>
<b>item3.2</b>
<b>item3.3</b>
</div><br><br>

или возьмите любую другую реализацию "спойлеров"

p.s. ну а с js как ни крути нужно цеплять ивенты, а значит без дополнительных ид"ов или хотя бы классов не обойтись

UPD: можно еще с DHTML побаловаться :3

<style>
.h{display: none;}
</style>
<div>
<b onclick='this.parentElement.children[1].style="display: block";'>0 name</b>
<b class='h' onclick='this.nextElementSibling.style="display: block";'>b item 1</b>
<b class='h' onclick='this.previousElementSibling.style="display: none";'>b item 2</b>
</div>

// children[1] у верхнего пункта как бы намекает что можете еще добавить перебор массива

БЛОГ НА HUSL

js выпадающие меню

Ответы (1 шт):