jquery - 悬停下一个li类时如何保持jquery下拉悬停内容打开

Question

我从一个站点上传了一个 jquery 下拉菜单，我想知道这是否可行，如果可以，如何？目前，当您将鼠标悬停在 3 个主要 li 类中的任何一个上时，下拉菜单会在每个类下方展开，然后如果您将鼠标悬停在打开的 div 上或悬停到另一个 li 类，则菜单会关闭并出现新内容。我想要这样，一旦你将鼠标悬停并打开它们中的任何一个，那么如果你的鼠标悬停在下一个上，整个容器不会收缩，而是针对新 li 的新内容进行调整。我想要的示例是Nike.com 菜单，只要您的鼠标在导航区域上，最后放置的内容就会保留，如果您将鼠标悬停在新菜单项上，菜单不会折叠，它会自行调整对于新内容。

我在这里设置了 jsfiddle 的演示测试 http://jsfiddle.net/R7aTq/

$(function(){

    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '300px'
    });

    $('#navigation_vert').naviDropDown({
        dropDownWidth: '300px',
        orientation: 'vertical'
    });
});

Answer 1

这是我想出的解决方案：http: //jsfiddle.net/JeremyGood/R7aTq/198/

您可能想要添加一些动画。此外，如果您使用绝对定位，您可以让下拉菜单与导航栏的宽度相同。

当然，我们基本上只是重写了插件的下拉逻辑。在某些时候，它只是成为您自己的自定义菜单代码。

$(function(){

    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '300px'
    });

    $('#navigation_vert').naviDropDown({
        dropDownWidth: '300px',
        orientation: 'vertical'
    });

    var olddropdown = null;

    $("#navigation_horiz>ul>li").unbind('mouseout');
    $("#navigation_horiz>ul>li").unbind('mouseover');
    $("#navigation_horiz>ul>li").bind("mouseout", function(event) {
         olddropdown = $(this).find(".dropdown");
    });
    $("#navigation_horiz>ul>li").bind("mouseover", function(event) {
        $(this).find(".dropdown").css('display', 'block');
        if (olddropdown != null) {
            olddropdown.css('display', 'none');
            olddropdown = null;
        }
    });
    $("#navigation_horiz>ul").bind("mouseout", function(event) {
        olddropdown.css('display', 'none');
        olddropdown = null;
    });
});