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>

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 有 class menuactive，调用 slideUp() 函数并删除 class menuactive 否则调用 slideUp() 函数在所有 ul 上，从所有 li 中删除 class menuactive，在被单击的那个上调用 slideDown() 并添加class 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>

jQuery滑动菜单功能

jQuery sliding menu function

html

javascript

css

jquery