导航悬停在桌面，点击移动

Question

我有一个 JSFiddle here。

这是一个带有下拉菜单的引导导航。 我没有使用引导下拉菜单，而是我自己的。 下拉菜单需要在桌面悬停和点击移动设备时显示。

我有一个媒体查询来显示悬停在桌面上的下拉菜单。 我正在使用 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/

更新：

悬停问题：在“移动模式”下，如果您单击某物，然后将大小调整为“完整模式”，则悬停停止工作。这是因为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');
        });
    }
});