jquery - 菜单垂直手风琴jQuery列表更改项目的

Question

我有一个垂直菜单手风琴，它会展开并在悬停时显示子项，如下面的标记所示：

<ul>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
    <li><a href=""></a>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </li>
</ul>

这是一个例子：http: //jsfiddle.net/A8CPd/

问题是当您将鼠标悬停在孩子身上时，它不会保持悬停状态。

Answer 1

那么如何附加悬停侦听器存在问题。您仅将侦听器附加到列表项中的锚点。然后，当您尝试悬停其中一个子菜单项时，您将不可避免地离开锚元素，从而导致菜单再次折叠。

相反，我相信这就是您要寻找的：

$("#accordion > li").hover(function(){
    $(this).find("ul").slideToggle(300);
});

现在我们将侦听器附加到整个 li 元素，其中还包含子菜单项。因此，当您将其悬停时，菜单也将保持打开状态。

也更新了你的小提琴：http: //jsfiddle.net/A8CPd/32/