javascript - jQuery滑动菜单功能

Question

你好我有一个无序列表菜单，试图让子元素在点击主要元素时上下滑动，我写了一个有效的 jQuery 代码但是当点击打开的菜单时它关闭它并再次打开，但是我希望它会关闭它。

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>

j查询

    $(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否则在所有 ul 上调用 slideUp() 函数，从所有 li 中删除类 menuactive，调用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>