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项'，它就会下降并显示'item a'，'item b'，'item 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对象

更新

以下代码用于防止fadeout + fadein，如果用户将鼠标从菜单移开并在菜单完全淡出之前再次将其悬停。

        $('.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)

           }
        );

Javascript没有延迟菜单项，但悬停菜单时5秒延迟

1 个答案:

更新