Question

如何同时防止滑动和滑动子菜单？我的导航有一个菜单，其中一个菜单有子菜单。当我点击有子菜单的菜单时，子菜单打开，关闭大约2次，最后关闭，但只有一次点击。它发生在移动设备上。请看看我的代码

HTML

<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="#" 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>
    </ul>
  </li>
  <li><a href="index.html#contact">contact</a></li></li>   
</ul>

和js

$(window).on('load resize', function(){
    if($(window).width() < 1000){
       $('.nav-menu li a').click(function(e) {
          e.preventDefault();
          $(this).next('ul').slideToggle(200, 'easeInExpo');
          $(this).parent().siblings().find('ul').slideUp(200, 'easeInExpo'); 
       });
    }
 })

Answer 1

每次调整窗口大小时都会绑定事件，因此它们会触发多次。如果您对此进行渐变，则它应该有效JSFIDDLE

$(window).on('load', function(){
    $('.nav-menu li a').click(function(e) {
        if($(window).width() < 1000){
            e.preventDefault();
            $(this).next('ul').slideToggle(200, 'easeInExpo');
            $(this).parent().siblings().find('ul').slideUp(200, 'easeInExpo'); 
        }
    });
 })

Answer 2

您多次绑定事件！每次页面调整大小时，您都会继续添加点击事件。所以他们会继续打桩。

如果您打算以这种方式进行，您需要取消绑定事件。

$(window).on('load resize', function(){
    $('.nav-menu li a').off("click");  //there are better ways, but it will work
    if($(window).width() < 1000){
       $('.nav-menu li a').click(function(e) {
       /* rest of logic */
       });
    }
});

其他选项是绑定一次并在click方法中进行宽度检查。

$(function(){    
    $('.nav-menu li a').click(function(e) {
        if($(window).width() >= 1000) return true;
        /* rest of logic */
    });
});

Answer 3

因为在加载和调整大小时你绑定了click方法所以它将绑定两次。最好只使用一种方法。如果你每次调整大小时都在重新调整大小，那么它将一次又一次地绑定

同时防止多次切换

HTML

和js

3 个答案: