jQuery 下拉问题（无法保持子菜单可见）

Question

我正在使用 jQuery 构建一个小下拉菜单，但我有一个小问题。 当我进入菜单时，它会下降，但是当我想用鼠标转到下拉部分时，它会返回（隐藏）。 这是因为菜单的标记与大多数 jQuery 下拉菜单有点不同（我认为）。

如果用户将鼠标悬停在 a 标签上，菜单应该可见，但由于 div 标签不是 a 标签的子标签，因此如果用户离开 a 标签，菜单将会淡出。有办法解决这个问题吗？我在网上找不到任何关于此的信息。

菜单标记

     <ul>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
    </ul>

jQuery 代码标记

    $('a').hover(function(){                     

        $(this).next('div').fadeIn(200);

    },function(){

        $(this).next('div').fadeOut(200);

    });

Answer 1

淡出不应该绑定到锚点，而应该绑定到 div。

您可以在锚点悬停时开始显示 div：

$('a').on("mouseenter", function() {
  $(this).next('div').fadeIn(200);
});

然后在鼠标离开时隐藏 div：

$('div').on("mouseleave", function() {
  $(this).fadeOut(200);
});

Answer 2

这是因为您的悬停事件针对的是链接元素，当您将鼠标悬停在链接之外时，您会隐藏菜单项。

要防止这种行为，只需将父元素作为目标即可，在本例中为

:

$('li').hover(function(){

    $(this).children('div').fadeIn(200);

}，功能（）{

    $(this).children('div').fadeOut(200);

});