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

Posted 2023-02-22

【中文标题】导航悬停在桌面，点击移动

【英文标题】：Nav hover on desktop, click on mobile

【发布时间】：2015-10-08 16:14:14

【问题描述】：

我有一个 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();
);

【参考方案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/

【讨论】：

谢谢，解决了重复打开和关闭的问题，但我仍然遇到悬停不工作的问题

alan0xd7 - 我知道，但这只是让我烦恼的事情。

@ttmt 更新了悬停的答案

【参考方案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();

);

【参考方案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>

【参考方案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');
        );
    
);