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，页面将保留元素应占用的可视空间，这通常不是嵌套菜单所需的

如果您想要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();
        }
    );
});

下拉悬停状态

2 个答案: