jquery - 在鼠标悬停jquery上获取子元素的类名

Question

当悬停在 menuItem 列表上时，我希望 subMenu 显示然后 mouseout 再次隐藏。问题是我如何在单击的 menuItem 中定位特定的子菜单（假设我将有更多带有子菜单的菜单项）。

html

<ul>
 <li class="menuItem">
 Menu Item 1
 <ul class="subMenu">
 <li> <a href="#"> Link 1 </a> </li>
 <li> <a href="#"> Link 2 </a> </li>
 </ul>
</li>

javascript

$(document).ready(function() {
$('.menuItem').mouseover(function() {


$($this).class('.subMenu').show();

});
});

Answer 1

尝试：

$('.menuItem').hover(
    function(){
        // first function is for the mouseover/mouseenter events
        $(this).find('.subMenu').show();
    },
    function(){
        // second function is for mouseleave/mouseout events
        $(this).find('.subMenu').hide();
    });

JS 小提琴演示。

值得指出的是，您根本不需要为此使用 JavaScript（除非您必须支持 IE6 及以下浏览器），并且可以只使用 CSS：

.menuItem:hover .subMenu,
.subMenu:hover {
    display: list-item;
}
.subMenu {
    display: none;
}​

JS 小提琴演示。

参考：

• find().
• hide().
• hover().
• show().

Answer 2

David Thomas 解决方案的一个稍微不同的版本，它使用toggle()并且只有一个内部函数：

$('.menuItem').hover(function(){
    $(this).find('.subMenu').toggle();
});

由于您只想显示或隐藏.subMenu，因此您只需要一个内部函数，该函数在鼠标悬停和鼠标离开时调用。如果您想显式编写鼠标离开功能，这可能是个人喜好问题，但我喜欢这个较短的版本。

Answer 3

利用：

$(this).find('.subMenu').show();

代替：

$($this).class('.subMenu').show();