Question

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

$('#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。如果用户在400ms内停止在元素上停留，则清除timeout并且内部代码永远不会运行。 400ms可以更改为您想要的任何数字，它只是试图测量用户意图。

这里有效：http://jsfiddle.net/rd9jS/12/

subnav / news toggle

1 个答案: