j查询滑动菜单功能

jQuery sliding menu function

本文关键字：菜单 功能 查询      更新时间：2023-09-26
嗨，我

有一个无序列表菜单，试图让子项目在单击主要项目时上下滑动，我写了一个有效的 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");
        });
});

如果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>

相关文章：