下拉悬停状态答案

【问题标题】：Dropdown hover state下拉悬停状态
【发布时间】：2010-03-03 17:00:43
【问题描述】：

HTML：

<ul class="dropdown">
    <li><a href="#">Item 1</a></li>
    <li>
        <a href="#">Item 2</a>
        <div class="submenu">something</div>
    </li>
</ul>

jQuery:

    $j("ul.dropdown li").hover(function () {
        $j(this).addClass("hover");
        $j('div.submenu', this).css('visibility', 'visible').hover(function () {
                $j(this).prev('a').addClass('hover');
            }, function () {
                $j(this).prev('a').removeClass('hover');
            });    
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

...菜单工作正常，但导航链接（打开下拉菜单）在下拉菜单上时应保持突出显示。如何在链接和子菜单打开时保持悬停状态？

谢谢！

【问题讨论】：

标签： jquery menu drop-down-menu hover

【解决方案1】：

试试这样的：

$j("ul.dropdown li").hover(function () {
    $j(this).children('a').andSelf().addClass("hover");
    $j('div.submenu', this).css('visibility', 'visible');
}, function () {
    $j(this).children('a').andSelf().removeClass("hover");
    $j('div.submenu', this).css('visibility', 'hidden');
});

如果您没有明确需要 visibility 和 display 可以工作，您可以这样做：

$j("ul.dropdown li").hover(function () {
    $j(this).children('a').andSelf().addClass("hover");
    $j('div.submenu', this).show();
}, function () {
    $j(this).children('a').andSelf().removeClass("hover");
    $j('div.submenu', this).hide();
});

【讨论】：

谢谢，但还是一样。一旦我离开链接，它就会恢复正常状态。
顺便说一句，我需要可见性，整个菜单都基于此。
@Nimbuz - 当你说移开时，你的意思是进入子菜单，还是进入一个完全不同的元素？
到下拉子菜单，是的。
哦，我没有创建 .hover 类。工作得很好，谢谢！ :)

【解决方案2】：

如果您使用visibility: hidden 而不是display: none，页面将保留元素应占用的视觉空间，这通常不是嵌套菜单所需要的

如果visibility是你想要的，请忽略我。否则，这是使用display 的替代方法（使层次结构中的每个选定项目保持突出显示，这似乎是您的问题所要求的）：

风格

li.hover { background: #eee; }
li.hover ul { background: #fff; }
ul ul { display: none; }

HTML

<ul>
    <li><a href="#">Item 1</a></li>
    <li>
        Item 2
        <ul>
            <li><a href="#">Item 2.a</a></li>
            <li>
                Item 2.b
                <ul>
                    <li><a href="#">Item 2.b.1</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
</ul>

jQuery

$(function() {
    $("ul li").hover(
        function () {
            $(this).addClass("hover").children("ul").show();
        },
        function () {
            $(this).removeClass("hover").children("ul").hide();
        }
    );
});

【讨论】：