Question

我正在寻找我正在使用的导航菜单的解决方案。这是JSFiddle，您可以在其中查看工作代码。

fadeIn效果只需要在nav-item悬停时发生，但是当菜单从底部，左侧或右侧发出鼠标时会发生这种情况。

Answer 1

看起来你想要的是：当你将鼠标从标签移动到另一个标签时，你不希望淡出和发生。

在这种情况下，这是因为您没有跟踪菜单是否打开。如果菜单未打开，您应该只进行淡入淡出，否则只需隐藏并显示没有淡入淡出。

代码：

var timer;
var isMenuOpen = false;
$('.nav-item').hover(
    function() {
        $('.subnav--main').hide();
        $('.promoted-content--main').hide();
        clearTimeout(timer);
        if(isMenuOpen){
            $(this).find('ul').show();
        }
        else{
            isMenuOpen = true;
            $(this).find('ul').fadeIn( 'slow' );
        }
    },
    function() {
        timer = setTimeout(function() {
            $('.subnav--main').fadeOut( 'fast' );
            $('.promoted-content--main').fadeOut( 'fast' );
            isMenuOpen = false;
        }, 1000);
    }
);

并且jsfiddle：http://jsfiddle.net/qdafe3uw/

Answer 2

如果您正在尝试让菜单保持打开状态，并且在将鼠标悬停在不同的导航项目上时不会将其淡出。选择器应该是nav - main

`var timer;
$('.nav--main').hover(function() {
    $('.subnav--main').hide();
    $('.promoted-content--main').hide();
    clearTimeout(timer);
    $(this).find('ul').fadeIn( 'slow' );
    },
    function() {
      timer = setTimeout(function() {
        $('.subnav--main').fadeOut( 'fast' );
        $('.promoted-content--main').fadeOut( 'fast' );
      }, 1000);
 });`

fadeIn从mouseleave开始（setTimeout）开始

2 个答案: