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

Question

我有一个 JSFiddle here。

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

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

如果我以桌面大小加载页面，然后将页面调整为移动大小，反之亦然，导航不会 work.If 我以桌面大小加载，悬停有效，但如果我随后调整为移动大小点击无法正常工作。

我真的不需要在调整页面大小后使用它，因为如果您在移动设备上，就不会调整大小。谁能告诉我为什么会这样，是否有解决方案？

$(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/

更新：

悬停问题：在 "mobile mode" 中，如果您单击某个内容，然后将大小调整为 "full mode"，悬停将停止工作。这是因为 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');
        });
    }
});

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

Nav hover on desktop, click on mobile

jquery

modernizr