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/

基本上不是单独处理每个菜单项的悬停处理程序，而是提出通用解决方案。话虽如此，你可以通过在悬停处理程序激活和使用promises（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);
                                                                                                }

                                                             );
                                            }
                   );

jQuery：mouseout后子菜单的问题

2 个答案: