下拉悬停状态

Question

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');
    });

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

谢谢！

Answer 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();
});

Answer 2

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

如果可见性是你想要的，请忽略我。否则，这里有一个使用 display 的替代方案（使层次结构中的每个选定项目突出显示，这似乎就是您的问题所要求的）：

Style

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();
        }
    );
});