Переключить коллапс родного брата

Question

У меня есть меню с HTML следующим образом:

<ul class="main-menu">
  <li>One</li>
  <li>Two</li>
    <ul class="sub-menu">
      <li class="sub-heading">Sub Heading</li>
      <li>A</li>
      <li>B</li>
    </ul>
  <li>Three</li>
  <li>Four</li>
</ul>

При нажатии на подзаголовок li под подзаголовком в этом случае A, B должно свернуться. Эта функциональность должна переключаться. Как мне добиться этого, используя ваниль JS или jQuery?

Answer 1

Другое решение использует свойство children, чтобы получить все дочерние элементы подменю родительского класса, используя reduce метод

let subMenu = document.getElementsByClassName("sub-menu")[0];
let subHeading = document.getElementsByClassName("sub-heading")[0];
//subMenu.firstChild.addEventListener("click", () => {
subHeading.addEventListener("click", () => {
  [...subMenu.children].reduce((acc, item)=>{
     
        item.toggleAttribute("hidden");
     
  });
});

<ul class="main-menu">
  <li>One</li>
  <li>Two</li>
  <ul class="sub-menu">
    <li class="sub-heading">Sub Heading</li>
    <li>A</li>
    <li>B</li>
  </ul>
  <li>Three</li>
  <li>Four</li>
</ul>

Answer 2

Вы можете использовать функцию siblings(), чтобы получить братьев и сестер li, и toggle(), чтобы показать скрытие.

$('.sub-heading').click(function(){
   $(this).siblings().toggle();
});

$('.sub-heading').click(function(){
   $(this).siblings().toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
  <li>One</li>
  <li>Two</li>
    <ul class="sub-menu">
      <li class="sub-heading">Sub Heading</li>
      <li>A</li>
      <li>B</li>
    </ul>
  <li>Three</li>
  <li>Four</li>
</ul>

Answer 3

Вам не нужно jQuery, вы можете, например, использовать nextElementSibling в сочетании с toggleAttribute() в ванили JavaScript для достижения этой цели, например:

let subHeading = document.querySelector(".sub-heading");
subHeading.addEventListener("click", () => {
  let nextSibling = subHeading.nextElementSibling;
  while (nextSibling) {
    nextSibling.toggleAttribute("hidden");
    nextSibling = nextSibling.nextElementSibling;
  }
});

<ul class="main-menu">
  <li>One</li>
  <li>Two</li>
  <ul class="sub-menu">
    <li class="sub-heading">Sub Heading</li>
    <li>A</li>
    <li>B</li>
  </ul>
  <li>Three</li>
  <li>Four</li>
</ul>

Answer 4

Братья и сестры элемента-переключателя

Переключение элементов можно выполнить просто с помощью classList.toggle. Вместо добавления прослушивателя событий для каждого подзаголовка было бы лучше создать одного прослушивателя для общего предка (например, main-menu) и прослушать, если элемент, по которому щелкнули (например, event.target), является подзаголовком и принять меры, если так.

let container = document.querySelector('.main-menu');

container.addEventListener('click', (e) => {
  let target = e.target, el = target;
  if (target.classList.contains('sub-heading'))
    while (el = el.nextElementSibling)
      el.classList.toggle('hide')
});

.hide {
  display: none;
}

<ul class="main-menu">
  <li>One</li>
  <li>Two</li>
  <ul class="sub-menu">
    <li class="sub-heading">Sub Heading</li>
    <li>A</li>
    <li>B</li>
  </ul>
  <li>Three</li>
  <li>Four</li>
</ul>