保持悬停状态 (jQuery)

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');
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

... 菜单工作正常，但是当显示 div.submenu 并将光标移动到它时，打开此子菜单的链接会丢失其“悬停”类，怎么办当链接和子菜单打开时，我在它们上保持悬停状态吗？

我尝试过这个，但它不起作用：

$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

根据我的经验，js 菜单带来的麻烦远大于其价值。如果您不想要任何花哨的淡入淡出或滚动效果，有一个完全可行的 CSS 解决方案。

但！无论如何，这可能与 CSS 有关。我认为人们想太多了。您真正想要的只是让您的链接看起来仍然悬停在上方——您的显示效果很好。好的。您可以使用 CSS 和 jQuery 来做到这一点：

ul.dropdown li:hover a,
ul.dropdown li.hover a {
/* how your link should look */
}

现在，如果您已经有了那种样式（.hover 很重要），那么您的子菜单也应该在悬停时消失，因此还有其他事情正在发生。

Answer 2

您可能需要考虑子菜单 div 也是 jQuery 元素的一部分，同时附加悬停效果。可能是这样的：

$('ul.dropdown li').each(function() {
    var self = $(this),
        menu = $(this).find('div.submenu'),
        el = menu.add(this);
    el.hover(function() {
            self.addClass("hover");
    menu.css("visibility", "visible");
    }, function() {
            self.removeClass("hover");
        menu.css("visibility", "hidden");
    });
});

Answer 3

您无法在未悬停的元素上维持悬停状态:) 如果可能，请尝试将 div.submenu 放入 ul.dropdown li 中。另一个解决方案是停止依赖 hover() 并使用另一种操作类的方法。不要使用 hover() 来切换类，而是使用一些函数来执行此操作并在需要时调用它。