0

我有一个下拉菜单，我希望能够将鼠标悬停在每个下拉菜单上，延迟 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”，我希望滚动的下拉菜单在淡出之前延迟。

但这不是它在做什么。它只是淡出，就像滚动另一个菜单项一样。

提前致谢。

4

1 回答 1

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)

           }
        );

而且您不需要单独的 mouseout 事件处理程序.mainnav。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)

           }
        );
于 2013-04-30T11:45:14.180 回答