javascript - 将鼠标悬停在导航链接上时如何防止持续闪烁？

Question

我创建了一个导航，如果您将鼠标悬停在链接上，您会看到较低的导航菜单，如果您单击较低的导航菜单保持事件状态的链接，等等。问题是，当我将鼠标悬停在顶级链接上时，悬停事件会发生持续发射导致严重闪烁。谁能告诉我哪里可能出错或者可以解决这个问题？

jsbin 链接在这里 http://jsbin.com/ijofis/15

Answer 1

您可以只使用 css 来隐藏/取消隐藏:

li:hover ul {display:block !important;}​

您的代码将会被简化。

/*
Task: The messed up GOMO navigation
*/

$(document).ready(function () {

  var lowerNav = $('.lower', '#main-nav').hide();

  $('#main-nav > li > a').on('click' , function(e){   
    if(!$(this).parent().hasClass('flag')){
      $('#main-nav > li').removeClass('flag');
      $('.lower').hide();
      $(this).parent().addClass('flag');
      $(this).next().show();
    }
    e.preventDefault();
  });

});​

这是一个示例:http://jsfiddle.net/nTwKH/

<小时/>

或者，这行 CSS 似乎可以修复您当前的代码:

a {text-decoration:none;color:#343434;  z-index:1; position: relative;}