Uso de Siblings para Menús

Read Time:51 Second

<script>
 $(".menu_mobile #menu-header li.menu-item-has-children a").click(function (e) {
    e.preventDefault();
    $(this).siblings("ul").slideToggle();
  });
</script>

Siblings buscará un elemento hermano del cual anclarse para realizar una acción determinada. En el ejemplo de arriba, la acción click está aplicada a un menú estándar de wordpress, apuntando directo al ancla.

Al hacer click usamos siblings para encontrar el «UL» hermano. Ejemplo de estructura del menú aplicada al JS

<div class="menu_mobile">
 <div id="menu-header">
   <ul>
    <li><a href="#">Item 1</a></li>
    <li class="menu-item-has-children>
       <a href="#">Item 2</a>
      <ul>
       <li><a href="#">Sub-item 1</a></li>
       <li><a href="#">Sub-item 2</a></li>
       <li><a href="#">Sub-item 3</a></li>
     </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   </ul>
 </div>
</div>