Javascript对菜单项没有延迟，但是将鼠标悬停在菜单上会延迟5秒

Question

我有一个下拉菜单，我希望能够以0.3秒的延迟将鼠标悬停在每个下拉菜单上，但是当您滑下菜单时，我希望它在淡出之前暂停2秒。

标记：

<ul class="mainnav">
    <li><a href="#">item 1</a>
        <ul class="sub">
            <li><a href="#">item a</a></li>
            <li><a href="#">item b</a></li>
            <li><a href="#">item c</a></li>
        </ul>
    </li>
    <li><a href="#">item 2</a>
        <ul class="sub">
            <li><a href="#">item d</a></li>
            <li><a href="#">item e</a></li>
            <li><a href="#">item f</a></li>
        </ul>
    </li>
</ul>

jQuery的：

function(){
    $('.mainnav > li').hover(
        function () {
             $(this).find('sub').fadeIn(300);
             },
        function () {
             $(this).find('sub').fadeOut(300);
        }
    );
    $('.mainnav').mouseout( function() {
        setTimeout(function() {
           $(this).find('sub').fadeOut(300);
        }, 2000);
    });
}

因此，如果我将鼠标悬停在“项目1”上，它就会掉落并显示“项目a”，“项目b”，“项目c”。 如果我将鼠标悬停在“项目2”上，它会下拉并显示“项目d”，“项目e”，项目f'。

现在，如果我退出“ .mainnav”，我希望翻转后的下拉菜单在淡出之前延迟。

但这不是它在做什么。 它只是在逐渐消失，就像在另一个菜单项上滚动一样。

提前致谢。

Answer 1

您使用错误的选择器。 $('sub')将寻找一个名为 sub的标签，但是要查找带有sub 类的元素，应该使用$('.sub') 。 仅此一项并不能解决您的问题。 尝试以下代码

       $('.mainnav > li').hover(
           function () {
              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');
              setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)

           }
        );

而且， .mainnav不需要单独的mouseout事件处理程序。 jQuery hover的第二个参数是mouseout处理程序。

为了描述我的答案， var sub = $(this).find('.sub'); 创建保存到悬停的一个参考.sub并把它传递给函数，因为this里面的匿名函数将参考window对象

更新资料

如果用户将鼠标从菜单上移开并在菜单完全淡出之前再次将其悬停，则下面的代码可以防止淡入+淡入。

        $('.mainnav > li').hover(
           function () {

              //this clears the timeout that is going to cause a fadeout
              window.clearTimeout(window.menufade);

              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');

              //this clears the timeout that is going to cause a fadeout, not necessary here I think, but i'll let it be :)
              window.clearTimeout(window.menufade);

              window.menufade = setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)

           }
        );