Question

当鼠标悬停在menuItem列表上时，我希望显示subMenu然后再次使用mouseout hide。问题是如何在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 Fiddle demo

值得指出的是，您根本不需要使用JavaScript（除非您必须支持IE6及更低版本等浏览器），并且只能使用CSS：

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

JS Fiddle demo

参考文献：

Answer 2

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

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

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

Answer 3

使用：

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

而不是：

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

在mouseover jquery上获取子元素的类名

3 个答案: