jquery - 大型下拉菜单悬停时闪烁

Question

我在网上找到的大型下拉菜单遇到了问题。它非常适合我的目的，但有时表现得很奇怪，并且存在闪烁问题。我找到它的链接在这里: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 事件)或者问题出在这个片段中。本质上，类 open 添加(切换)到 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关于功能。