javascript - 导航菜单切换滑动效果反复工作

Question

我的网站 nav-menu 在移动菜单中使用了 slideToggle 功能。它有一个控制菜单打开/关闭的滑动切换器。其中一个菜单有一个子菜单。单击具有子菜单(包含 ul)的菜单时，子菜单打开和关闭并打开 4/5 次然后关闭。

我的代码是

<span class="menu-toggler"></span>
<ul class="nav-menu align-right">
  <li class="current"><a href="index.html#header">home</a></li>
  <li><a href="index.html#about-us">about us</a></li>
  <li><a href="index.html#services">services</a></li>
  <li><a href="index.html#works">works</a></li>
  <li><a href="index.html#team">team</a></li>
  <li><a href="index.html#blog">Blog</a></li>
  <li>
      <a href="#" class="extra">Extra</a>
      <ul>
          <li><a href="blog-three.html">blog grid 3</a></li>
          <li><a href="blog-four.html">blog grid 4</a></li>
          <li><a href="blog-single.html">blog single</a></li>
          <li><a href="portfolio-three.html">portfolio 3</a></li>
          <li><a href="portfolio-single.html">portfolio single</a></li>
       </ul>
   </li>
   <li><a href="index.html#contact">contact</a></li>
   <li><a href="" class="search-bar extra"><i class="fa fa-search"></i></a></li>
</ul>

还有我的js

$(document).on('click', '.menu-toggler' ,function(e){
   $('.nav-menu').slideToggle();
   $('.menu-toggler').toggleClass('open');
});

if($('.nav-menu li').find('ul')){
   $('.nav-menu li ul').addClass('drop-menu');
}

$(window).on('load resize', function(){
        if($(window).width() < 1000){
            $('.drop-menu').parent('li').find('a').on('click', function(){
                $('.drop-menu').slideToggle();
            })
        }
    })

如何停止子菜单的重复滑动

Answer 1

它可能正在阅读多次点击。只需在单击时执行向下滑动功能，并使用单独的功能隐藏菜单。

$(document).on('click', '.menu-toggler' ,function(e){
   $('.nav-menu').slideDown();
   $('.menu-toggler').toggleClass('open');
});

$('.open').on('click',function(){
$('.nav-menu').hide();
});