巨型下拉菜单悬停闪烁 [英] Mega drop down menu onhover flickering

问题描述

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

I've got a problem with a mega drop down menu that I found online. It is perfect for my purpose but it acts weird sometimes and it has a flickering and flashing problem. The link where I found it is here: http://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel . The author already knows that problem, but essentially it could work just fine for mobile if it will be hide. On desktop version I think is a really good idea and I'm using on a website that I build: http://napoleon.larchedigitalmedia.com/.

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

The problem as I told you before is the flirking and I guess that the problem is here in 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');       
    });

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

I don't understand if it is a bootstrap problem (bootstrap use mostly an onclick event for the mega drop down menu) or the problem is in this snippet. Essentially the class open is added (toggle) too fast to a div and sometimes it is applied to two divs at the same times. Could anyone help me to fix this problem?

推荐答案

据我所知，在您的项目中，动画没有时间完成并且 JS 试图同时为两者设置动画.我只是对您的代码进行了一些更改，闪烁停止了.

As far as I can see, in your project, the animation doesn't have time to finish and JS is trying to animate both at the same time. I just changed a little bit of your code and the flickering stops.

$(".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 文档.

Just by changing the second parameter of the stop() function, the animation executes itself. If you want more info, there is always the Jquery documentation on the fuction.

这篇关于巨型下拉菜单悬停闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！