jQuery：鼠标悬停后子菜单的问题

Question

我有一个在悬停时滑入和滑出的子菜单。见小提琴here。

我在 hover() 中使用了 hover()。当我将鼠标悬停在Test 1 上时，它会滑入子菜单的内容。当我将鼠标悬停在子菜单上时，我想让它保持打开状态。在小提琴中，这似乎适用于测试 1。但是，当我从测试 1 鼠标悬停并悬停在测试 2 上时，子菜单不会滑出。此外，当我从测试 1 鼠标移出（屏幕外）时，它仍然继续显示子菜单。

如何解决这个问题并让这段代码更优雅？

HTML

<ul class="nav">
    <li class="test1"><a href="#">Test 1</a></li>
    <li class="test2"><a href="#">Test 2</a></li>
    <li class="test3"><a href="#">Test 3</a></li>
</ul>
<div class="content-area">
    <div id="test1-content">This is test 1 submenu</div>
    <div id="test2-content">This is test 2 submenu</div>
    <div id="test3-content">This is test 3 submenu</div>
</div>

JS

$(document).ready(function ($) {
    $('.test1').hover(function () {
        $(this).addClass("active");
        $('#test1-content').show("slide", {
            direction: "right"
        }, 1000);
    }, function () {
        $('#test1-content').hover(function () {

        }, function () {
            $('.test1').removeClass("active");
            $(this).hide("slide", {
                direction: "right"
            }, 1000);
        });
    });
    $('.test2').hover(function () {
        $('#test2-content').show("slide", {
            direction: "right"
        }, 1000);
    }, function () {
        $('#test2-content').hide("slide", {
            direction: "right"
        }, 1000);
    });
    $('.test3').hover(function () {
        $('#test3-content').show("slide", {
            direction: "right"
        }, 1000);
    }, function () {
        $('#test3-content').hide("slide", {
            direction: "right"
        }, 1000);
    });
});

Answer 1

$(document).ready(function ($) {

function hideOther(){
    $(".menu-item").each(function(){
        var id= $(this).attr("id");
        if($(this).hasClass("active")){
            $(this).removeClass("active");
            return $("#"+id+"-content").hide("slide", {
                direction: "right"
            }, 1000);
        }
    });
}

$(".menu-item").each(function(){
    //get menu item's id
    var id= $(this).attr("id");

    //attach hover handler
    $(this).hover(function(){
        hideOther();
        $(this).addClass("active");
        $("#"+id+"-content").show("slide", {
            direction: "right"
        }, 1000);
    }, function(){
       //we are taking care of removing others 
       //already.
    });
});

});

这是一个 jsfiddle，它可以满足您的需求： http://jsfiddle.net/K5P9Z/109/

基本上，与其尝试单独处理每个菜单项的悬停处理程序，不如提出一个通用的解决方案。话虽如此，您绝对可以通过在悬停处理程序激活中添加延迟和使用承诺 (http://api.jquery.com/promise/) 来改进这个小提琴。

我会留给你享受这些主题的探索:)

Answer 2

我删除了除第一个之外的所有悬停功能，然后将其升级（存在一些小括号问题），然后复制整个内容并将其更改为 test2 等。我认为您可以为第三个功能做.

FIDDLE

JS（仅限第一个）

$('.test1').hover(function () {
                               $(this).addClass("active");
                               $('#test1-content').show("slide", {
                                                                  direction: "right"
                                                                  },
                                                                  1000 );
                               },
                               function () {
                                   $('#test1-content').hover( function(){},
                                                              function(){
                                                                         $('.test1').removeClass("active");
                                                                         $(this).hide("slide", {
                                                                                                direction: "right"
                                                                                                },
                                                                                                1000);
                                                                                                }

                                                             );
                                            }
                   );