javascript – jQuery滑动菜单功能

2023年3月27日 141次阅读

我有一个无序的列表菜单,试图让子项向下滑动并点击主要项目,我写了一个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,然后在所有uls上调用slideUp()函数,从所有lis中删除类menuactive,在单击的那个上调用slideDown()并添加类菜单活动到被单击的类.

$(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>
点赞