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

您的悬停监听器附加方式存在问题。您只将侦听器附加到list-item中的锚点。当您尝试悬停其中一个子菜单项时，您将不可避免地离开锚元素，从而导致菜单再次崩溃。

相反，我相信这就是你要找的东西：

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

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

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

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

1 个答案: