Question

我有一个JSFiddle here。

这是一个带下拉菜单的bootstrap导航。我没有使用bootstraps下降但我自己。下拉菜单需要悬停在桌面上并点击移动设备。

我有一个媒体查询，可以在桌面上悬停时显示下拉菜单。我正在使用Modernizr在移动尺寸上添加点击事件。如果页面以该大小加载，则桌面和移动功能可以正常工作。如果以桌面大小加载页面，则悬停可以正常工作，如果页面以移动设备大小加载，则移动功能可以正常工作

如果我以桌面大小加载页面，然后将页面调整为移动大小或反之亦然导航无法正常工作。如果我加载桌面大小，则悬停可以正常工作，但如果我调整大小到移动大小，则点击不会工作正常。

在页面调整大小后，我真的不需要这个工作，因为如果你在移动设备上，你就不会调整大小。任何人都可以告诉我为什么会这样，如果有解决方案吗？

$(function(){
    function doneResizing() {
        if(Modernizr.mq('screen and (max-width:767px)')) {
            $('.at-drop-down').on('click', function(e){
                e.preventDefault();
                $(this).next($('.sub-menu')).slideToggle();
            })
        }
    }
    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });
    doneResizing();
});

Answer 1

我认为问题是因为，当您调整大小时，会多次调用doneResizing()方法，并且会在下拉列表中附加多个点击事件处理程序。

您可以尝试这样做：

$(function(){

    $('.at-drop-down').on('click', function(e){
        if(Modernizr.mq('screen and (max-width:767px)')) {
            e.preventDefault();
            $(this).next($('.sub-menu')).slideToggle();
        }
    })

});

不需要调整大小事件，点击事件只能注册一次。

演示：https://jsfiddle.net/alan0xd7/cwwaqp5k/45/

<强>更新

悬停问题：在＆＃34;移动模式＆＃34;，如果您点击了某些内容，然后调整为＆＃34;完整模式＆＃34;，则悬停停止工作。这是因为slideToggle()设置CSS样式以隐藏和显示元素。您可以执行此操作以删除它们：

$(window).resize(function() {
    $('.sub-menu').attr("style", "");
});

演示：https://jsfiddle.net/alan0xd7/cwwaqp5k/46/

Answer 2

您在调整大小时添加了许多事件侦听器。尝试将JS更改为

$(function(){
    function doneResizing() {
        if(Modernizr.mq('screen and (max-width:767px)')) {
            $('.at-drop-down').off('click'); //Remove all previous event listeners
            $('.at-drop-down').on('click', function(e){
                e.preventDefault();
                $(this).next($('.sub-menu')).slideToggle();
            })

        }
    }

    var id;
    $(window).resize(function() {
        clearTimeout(id);
        id = setTimeout(doneResizing, 0);
    });

    doneResizing();

});

Answer 3

   $(window).resize(function(){
    var wid = $(window).width();
    if(wid < 768){
         $(".dropdown").on('click',  function(){
                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
                $(this).toggleClass('open');
      });
    }
    else{
          $(".dropdown").hover(
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
                $(this).toggleClass('open');
            },
            function() {
                $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                $(this).toggleClass('open');
            });
    }
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Inspiration<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">LookBook</a></li>
            <li><a href="#">Designs</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </li>

Answer 4

或者，对于下拉菜单，您只能使用jQuery，而不能使用Modernizr，以使其在桌面上悬停并在移动设备上单击即可显示。

使用data-toggle="dropdown"进入上方的下拉菜单：

<a class="dropdown-toggle" data-toggle="dropdown" role="menu" aria-expanded="false" href="www.example.com">
  Parent
</a>
<ul class="dropdown-menu">
  <li>Child 1</li>                            
  <li>Child 2</li>          
  <li>Child 3</li>                            
</ul>

data-toggle="dropdown"将阻止在单击和触摸时重定向到URL。

使用ontouchstart来检测移动浏览器，然后仅在桌面上单击父项（不移动）时强制重定向到URL：

function is_touch_device() {
  return !!('ontouchstart' in window);
}
$(document).ready(function() {
    if(!is_touch_device()) {
        $('a.dropdown-toggle[data-toggle="dropdown"]').click(function (e) {
            window.location.href = $(this).attr('href');
        });
    }
});

导航悬停在桌面上，单击移动设备

4 个答案: