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

这是一个带有下拉菜单的引导式导航。我没有使用引导程序下拉，但我自己的。下拉菜单需要在桌面上悬停并点击移动时显示。

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

来源

2015-07-19 ttmt

我相信这个问题是因为，当你调整时，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/

来源

2015-07-19 12:43:44 alan0xd7

谢谢，解决重复开闭，但我仍然有悬停的问题不工作 – ttmt

alan0xd7 - 我知道，但它只是一些这让我很烦恼。 – ttmt

@ttmt更新了悬停的答案 – alan0xd7

您要添加大量的事件监听器，当你调整。尝试改变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(); 

});

来源

2015-07-19 12:49:21

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

来源

2015-09-08 09:16:29 AkshayKinhikar

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

回答

相关问题