jquery - 子导航/新闻切换

Question

News替换sub-navmouseleave 上的菜单，虽然它按预期工作，但如果您快速移动父项目，切换非常分散注意力，有时新闻和子导航相互重叠。

http://jsfiddle.net/rd9jS/4/

$('#nav > ul > li').mouseover(function () { // on mouseover
      if ($(this).has(".children").length) { // if has submenu
        $('#news').slideUp();  // hide ticker
        $(this).parent().find(".children").not($('.children', this)).hide(); // hide other submenus
        $('.children', this).slideDown(); // show current
      } else {
        $(this).parent().find(".children").not($('.children', this)).hide();
        $('#news').slideDown(); 
      }
    });
    $('#nav .children').mouseleave(function (e) { // on mouseleave
          var $children = $(this); 
          setTimeout(function(){ // after a whilte
              $children.slideUp(); // hide current submenu
              $('#news').slideDown(); // show ticker
          },4000);
          e.stopPropagation();
    });

Answer 1

我的解决方案是重新编写您的第一个事件：

var timer;
$('#nav > ul > li').on('mouseover mouseout', function (e) {
    clearTimeout(timer);
    $this = $(this);
    var child = $this.find('.children');
    timer = setTimeout(function () {
        if (e.type === 'mouseover' && child.length) {
            $('#nav > ul > li').not($this).removeClass('active');
            $this.addClass('active');
            $('#news').slideUp();
            $("#nav .children").not(child).hide();
            child.slideDown();
        } else {
            $this.removeClass('active');
            $("#nav .children").hide();
            $('#news').slideDown();
        }
    }, 300);
});

当timeout用户悬停时设置。如果用户在 400 毫秒内停止将鼠标悬停在元素上，timeout则清除 并且其中的代码永远不会运行。400ms 可以更改为您想要的任何数字，它只是为了尝试衡量用户意图。

它在这里工作：http: //jsfiddle.net/rd9jS/12/