巨型下拉菜单悬停闪烁

Question

我在网上找到的大型下拉菜单有问题。它非常适合我的目的，但有时它的行为很奇怪，并且存在闪烁和闪烁的问题。我找到它的 link 在这里： http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel 。作者已经知道这个问题，但如果它被隐藏，它基本上可以在移动设备上正常工作。在桌面版上，我认为这是一个非常好的主意，我正在我建立的网站上使用：http://napoleon.larchedigitalmedia.com/.

我之前告诉你的问题是调情，我猜问题出在jquery:

$(".dropdown").hover(            
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
      $(this).toggleClass('open');        
    },
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
      $(this).toggleClass('open');       
    });

我不明白这是 bootstrap 问题（bootstrap 主要使用大型下拉菜单的 onclick 事件）还是此代码段中存在问题。本质上，class 打开添加（切换）到 div 的速度太快，有时它会同时应用于两个 div。谁能帮我解决这个问题？

Answer 1

据我所知，在您的项目中，动画没有时间完成，而 JS 试图同时为两者设置动画。我只是稍微更改了您的代码，闪烁就停止了。

$(".dropdown").hover(            
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
  $(this).toggleClass('open');        
},
function() {
  $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideUp("400");
  $(this).toggleClass('open');       
});

只需更改 stop() 函数的第二个参数，动画就会自行执行。如果您想了解更多信息，函数上总是有 Jquery documentation。

Answer 2

这是由于 hover 事件造成的。只需将 hover 事件更改为 mouseenter 和 mouseleave 即可解决此问题。

改变这个

   $(".dropdown").hover(            
       // content here
   );

到

$(".dropdown").mouseenter(            
  function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
    $(this).toggleClass('open');        
  },
);

$(".dropdown").mouseleave(            
  function() {
    $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,false).slideDown("400");
    $(this).toggleClass('open');        
  },
);

希望对您有所帮助！

巨型下拉菜单悬停闪烁

Mega drop down menu onhover flickering

jquery

toggle

megamenu

twitter-bootstrap