JQuery sliding menu function

Question

Hi, I have a menu of unordered lists, trying to make submenu slides up and down when I click on the main elements, I wrote jQuery code that works, but when you click on the open menu, it closes it and opens again, but I was hoping that he will just close it.

HTML

<div class="menuNav">
  <ul>
  <li><span>item_1</span>
    <ul>
      <li>sub-item_1-1</li>
      <li>sub-item_1-2</li>
      <li>sub-item_1-3</li>
      <li>sub-item_1-4</li>
    </ul>
  </li>

  <li><span>item_2</span>
    <ul>
      <li>sub-item_2-1</li>
      <li>sub-item_2-2</li>
      <li>sub-item_2-3</li>
      <li>sub-item_2-4</li>
    </ul>
  </li>

  <li><span>item_3</span>
    <ul>
      <li>sub-item_3-1</li>
      <li>sub-item_3-2</li>
      <li>sub-item_3-3</li>
      <li>sub-item_3-4</li>
    </ul>
  </li>
</ul>
</div>

jQuery

    $(document).ready(function() {

    $('.menuNav ul li').click(function(){
        $(this).parent().find('ul').slideUp("fast");
        $(this).parent().find("li").removeClass('menuactive');
        $(this).find('ul').slideDown("slow");
        $(this).addClass('menuactive');
        });

    $('.menuNav ul .menuactive').click(function(){
        $(this).parent().find('ul').slideUp("fast");
        });

});

Answer 1

li menuactive, slideUp() menuactive else, slideUp() ul s, menuactive li s, slideDown() , , menuactive , .

$(document).ready(function() {
  $('ul > li > ul').hide();
  $('.menuNav > ul > li').click(function() {
    if ($(this).hasClass('menuactive')) {
      $(this).find('ul').slideUp('fast');
      $(this).removeClass('menuactive');
    } else {
      $(this).siblings().find('ul').slideUp('fast');
      $(this).siblings().removeClass('menuactive');
      $(this).find('ul').slideDown('fast');
      $(this).addClass('menuactive');
    }
  });
});

.menuactive {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuNav">
  <ul>
    <li><span>item_1</span>
      <ul>
        <li>sub-item_1-1</li>
        <li>sub-item_1-2</li>
        <li>sub-item_1-3</li>
        <li>sub-item_1-4</li>
      </ul>
    </li>

    <li><span>item_2</span>
      <ul>
        <li>sub-item_2-1</li>
        <li>sub-item_2-2</li>
        <li>sub-item_2-3</li>
        <li>sub-item_2-4</li>
      </ul>
    </li>

    <li><span>item_3</span>
      <ul>
        <li>sub-item_3-1</li>
        <li>sub-item_3-2</li>
        <li>sub-item_3-3</li>
        <li>sub-item_3-4</li>
      </ul>
    </li>
  </ul>
</div>

Hide result