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

Question

[z_u_q]

Как сделать, сохраняя текущую структуру вёрстки, чтобы при клике на пункт "Товары 1" пункты "Товар 1-4" скрывались, при клике на "Товары 2" скрывался пункт "Товар 21", а при клике на пункт "Товары 1" скрывались пункты "Товар 31-36"?

Ссылка на пример

Comments

[Александр Аксентьев]

текущую структуру вёрстки

это не структура, фигня какая-то.
Сейчас у вас скорее отсутствие структуры.

Используйте вложенные списки и задача решится сама собой.

[FeST1VaL]

а зачем так? ужс... у вас нету опознавательных знаков, что следующие элементы принадлежат этому... так что тут только какой то велосипед с запоминанием текущего и перебором остальных... пока не дойдешь до li у которой внутри <b> и не конец ul

Я быстро не смог придумать как это может работать) думаю смотреть в сторону closest

Answer 1

[0xD34F]

.tags li.hidden {
  display: none;
}

document.querySelectorAll('.tags b').forEach(n => {
  n.closest('li').classList.add('xxx');
  n.addEventListener('click', onClick);
});

function onClick(e) {
  for (
    let el = e.target.closest('li');
    (el = el.nextElementSibling) && !el.classList.contains('xxx');
    el.classList.toggle('hidden')
  ) ;
}

Comments

[z_u_q]

Спасибо!