Javascript 如何在jQuery中检测鼠标在子元素上？

我有一个HTML格式的菜单子菜单子菜单结构，如下所示：

<menu>
    <li><a href="...">Item 1</a></li>
    <li><ul>
            <li><a href="...">Subitem 1</a></li>
            <li><a href="...">Subitem 2</a></li>
            <li><ul>
                    <li><a href="...">Sub-subitem 1</a></li>
                    <li><a href="...">Sub-subitem 2</a></li>
                    <li><a href="...">Sub-subitem 3</a></li>
                </ul>
                <a href="...">Subitem 3</a></li>
            <li><a href="...">Subitem 4</a></li>
        </ul>
        <a href="...">Item 2</a>
    </li>
    <li><a href="...">Item 3</a></li>
    <li><a href="...">Item 4</a></li>

$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */ 

// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() {
    var time = new Date().getTime();
    $(this).parent().find('ul').show().data('showing-time', time);
}).mouseleave(function() {
    var leaveTime = new Date().getTime();
    var $this = $(this);
    window.setTimeout(function () {
        var $ul = $this.parent().find('ul');
        var beginTime = $ul.data('showing-time') || 0;
        if (leaveTime > beginTime) {
            $this.parent().find('ul').hide().data('showing-time', 0);
        }
    }, 100);
});
});

我使用以下jQuery代码：

$(function() {
    /* hide all submenu */
    $('menu').find('ul').hide();
    /* show submenu on mouseenter */
    $('menu li a').mouseenter(function() {
        $(this).parent().children('ul').show();
    }).mouseleave(function() {
        $(this).parent().children('ul').hide();
    });
});

---

如何检测鼠标将元素留给其子对象？或者，如果有必要，如何让子元素保留？

将代码更改为如下：

<menu>
    <li><a href="...">Item 1</a></li>
    <li><ul>
            <li><a href="...">Subitem 1</a></li>
            <li><a href="...">Subitem 2</a></li>
            <li><ul>
                    <li><a href="...">Sub-subitem 1</a></li>
                    <li><a href="...">Sub-subitem 2</a></li>
                    <li><a href="...">Sub-subitem 3</a></li>
                </ul>
                <a href="...">Subitem 3</a></li>
            <li><a href="...">Subitem 4</a></li>
        </ul>
        <a href="...">Item 2</a>
    </li>
    <li><a href="...">Item 3</a></li>
    <li><a href="...">Item 4</a></li>

$(function() {
/* hide all submenu */
$('menu').find('ul').hide();
/* show submenu on mouseenter */ 

// here, just select the direct child
$('menu').find('li > a, li > ul').mouseenter(function() {
    var time = new Date().getTime();
    $(this).parent().find('ul').show().data('showing-time', time);
}).mouseleave(function() {
    var leaveTime = new Date().getTime();
    var $this = $(this);
    window.setTimeout(function () {
        var $ul = $this.parent().find('ul');
        var beginTime = $ul.data('showing-time') || 0;
        if (leaveTime > beginTime) {
            $this.parent().find('ul').hide().data('showing-time', 0);
        }
    }, 100);
});
});

希望这有帮助

更新
代码已更新

---

我建议只把子菜单放在父菜单项旁边（这里，意思是

li>a

元素），以获得更好的结果。

下面是我的操作方法。您根本不需要javascript，至少不需要简单的隐藏/显示。但是，如果您想添加延迟，我强烈建议使用jquery只添加/删除带有

settimeout

的适当css类

css:

html:

使用js延迟检查此JSFIDLE：

---

你不需要像

菜单>ul>li>ul一样的东西吗

我认为标签名称不是关键。如果出现问题，请将其更改为

。）这有用吗？您的HTML无效。

li

应该在

ul

内。您的HTML无效，但不是因为@putvande或@Mr.Alien所说的话。或者，如果您的菜单要包含导航链接，而不是web应用程序的交互式javascript驱动控件，。这是一个好主意，但此解决方案会在鼠标进入之前隐藏子项。在

.mouseleave

部分中，需要检查鼠标在哪里。。。在子/同级元素中还是在其他任何地方？我可以这样做吗？

<ul class="menu">
    <li><a href="...">Item 1</a></li>
    <li><ul class="submenu">
            <li><a href="...">Subitem 1</a></li>
            <li><a href="...">Subitem 2</a></li>
            <li><ul class="submenu">
                    <li><a href="...">Sub-subitem 1</a></li>
                    <li><a href="...">Sub-subitem 2</a></li>
                    <li><a href="...">Sub-subitem 3</a></li>
                </ul>
                <a href="...">Subitem 3</a></li>
            <li><a href="...">Subitem 4</a></li>
        </ul>
        <a href="...">Item 2</a>
    </li>
    <li><a href="...">Item 3</a></li>
    <li><a href="...">Item 4</a></li>
</ul>

$('body').on('mouseleave','.submenu', function(e) {

    var jTarget = $(e.currentTarget).addClass('show');

    setTimeout(function() {
            jTarget.removeClass('show');
    }, 500);
})