巨型下拉菜单悬停闪烁

Por*_*o80 2 jquery toggle megamenu twitter-bootstrap

我在网上找到的大型下拉菜单有问题。它非常适合我的目的,但有时它的行为很奇怪,并且有闪烁和闪烁的问题。我找到它的链接在这里: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');       
    });
Run Code Online (Sandbox Code Playgroud)

我不明白这是引导程序问题(引导程序主要使用大型下拉菜单的 onclick 事件)还是问题出在此代码段中。本质上,类 open 添加(切换)到一个 div 的速度太快了,有时它会同时应用于两个 div。谁能帮我解决这个问题?

小智 5

据我所知,在您的项目中,动画没有时间完成,而 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');       
});
Run Code Online (Sandbox Code Playgroud)

只需更改stop()函数的第二个参数,动画就会自行执行。如果您想了解更多信息,请参阅有关该功能的Jquery 文档