Hiding brother menu

Navigation
-1

I have a main menu that is in li h3 and the submenus are in li h4 . In structure, they are like brothers. Within the same ul and in the same structure as li . When I click the li h3 menu I want the li h4 menu to add up. I did this with JQuery: 

$('.itemSubmenuMobile ul li h3').click(function(event) {
  event.preventDefault();
  $('.itemSubmenuMobile ul li h4').toggle(300);
});

The li h4 item is disappearing correctly. But the li that stays above h4 still remains. In this case, add only the content and the li space. How would I remove li too? 

<ul style="overflow: hidden; display: block;">
  <li>
    <h3>
      <a href="/produtos/papeis-de-parede-1">Item 1</a>
    </h3>
  </li>
  <li>
    <h4><a href="/produtos/decorativo-8">Subitem 1</a></h4>
  </li>
  <li>
    <h4><a href="/produtos/rustico-7">Subitem 2</a></h4>
  </li>
<li>
    <h3>
      <a href="/produtos/papeis-de-parede-1">Item 1</a>
    </h3>
  </li>
  <li>
    <h4><a href="/produtos/decorativo-8">Subitem 1</a></h4>
  </li>
  <li>
    <h4><a href="/produtos/rustico-7">Subitem 2</a></h4>
  </li>
</ul>
    
asked by anonymous 01.09.2017 / 14:11

1 answer

1

You can use .closest('li').nextAll('li') to fetch the next li . Then it makes a .each and stops it if one of the descendants of li is a h3 . 

$('ul li h3').click(function(event) {
  event.preventDefault();
  $(this).closest('li').nextAll('li').each(function() {
    if (this.firstElementChild.matches('h3')) return false;
    $(this).toggle(300);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulstyle="overflow: hidden; display: block;">
  <li>
    <h3>
      <a href="/produtos/papeis-de-parede-1">Item 1</a>
    </h3>
  </li>
  <li>
    <h4><a href="/produtos/decorativo-8">Subitem 1</a></h4>
  </li>
  <li>
    <h4><a href="/produtos/rustico-7">Subitem 2</a></h4>
  </li>
  <li>
    <h3>
      <a href="/produtos/papeis-de-parede-1">Item 2</a>
    </h3>
  </li>
  <li>
    <h4><a href="/produtos/decorativo-8">Subitem 1</a></h4>
  </li>
  <li>
    <h4><a href="/produtos/rustico-7">Subitem 2</a></h4>
  </li>
</ul>
    
01.09.2017 / 14:21
I am creating a school system, I want together a list of linked teachers and materials Bank (MySql) collapse animation bootstrap does not work