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

【问题标题】：Get class name of child element on mouseover jquery在鼠标悬停jquery上获取子元素的类名
【发布时间】：2012-04-20 21:25:38
【问题描述】：

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

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

});
});

【问题讨论】：

标签： jquery get classname

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

试试：

$('.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.

参考资料：

【讨论】：

使用 toggle() 而不是调用 hover() 两次： $('.menuItem').hover(function(){ $(this).find('.subMenu').toggle() ; });
为什么？我打电话给hover() 一次。 ...除非我错过了什么？
抱歉，我的意思不是使用显式的 mouseleave 函数。 toggle() 显示隐藏，隐藏可见元素，所以 toggle() 就足够了。
如果有意义的话，我更喜欢明确撤消我所做的事情。它可以编写更多重复的脚本，但它往往会减少意外事件的范围。另外，在这种情况下，意味着我不必担心兄弟姐妹及其孩子的 .menuItem 元素。
您的评论中没有什么与 toggle() 而不是您使用的两种方法不同。但这取决于个人喜好。我只是希望我的代码尽可能简洁。

【解决方案3】：

用途：

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

代替：

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

【讨论】：

你能对你的答案多解释一下吗？它可能有助于 OP 更好地理解。