巨型下拉菜单onhover闪烁

时间:2016-07-08 14:39:51

标签: jquery twitter-bootstrap toggle megamenu

我在网上找到的大型下拉菜单出了问题。它非常适合我的目的,但它有时很奇怪,它有一个闪烁和闪烁的问题。我找到它的链接在这里: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主要用于mega下拉菜单的onclick事件)或问题出现在这个片段中。基本上,类open是添加(切换)到div太快,有时它同时应用于两个div。有人可以帮我解决这个问题吗?

2 个答案:

答案 0 :(得分:3)

据我所知,在你的项目中,动画没有时间完成,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

答案 1 :(得分:0)

这是由于hover事件引起的。只需将hover事件更改为mouseentermouseleave即可解决此问题。

更改此

   $(".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');        
  },
);

希望这会有所帮助!