jQuery UI Accordion - 在鼠标移出时重新激活默认活动元素

Question

我正在使用手风琴进行导航，我需要每个元素在鼠标悬停时变为活动状态，但在鼠标悬停时，初始活动元素应该展开，而不是最后一个悬停的元素。

这就是我正在尝试的：

<div id="accordion">
    <h3 id="item-1">Item 1</h3>
    <div id="item-1-content">Item 1 content</div>
    <h3 id="item-2">Item 2</h3>
    <div id="item-2-content">Item 2 content</div>
    <h3 id="item-3">Item 3</h3>
    <div id="item-3-content">Item 3 content</div>
</div>

还有js：

$("#accordion").accordion({
    event: "mouseover",
    active: "#item-1",
    collapsible: false
}).mouseout(function() {
    $(this).accordion('option', 'active', '#item-1');
});

在页面加载时，#item-1-content 会按应有的方式展开。如果我将鼠标移到#item-2 上，#item-2-content 会展开而 #item-1-content 会缩小，就像它们应该的那样。当我将鼠标移到手风琴外时，#item-1-content 应该再次成为展开的元素，但这不会发生。

如果我省略“mouseout”回调，最后一个悬停的元素保持活动状态。如果我以这种方式离开它，即使由于事件冒泡而实际上没有“离开”手风琴，也会触发“mouseout”，从而导致奇怪的行为。

我应该防止手风琴元素冒泡还是有办法通过手风琴选项的组合来实现此功能？

Answer 1

注意difference between "mouseout" and "mouseleave" 以及设置手风琴的“活动”选项和激活内容部分之间！ 正确的js代码应该是：

$("#accordion").accordion({
    event: "mouseover",
    active: "#item-1",
    collapsible: false
}).mouseleave(function() {
    $(this).accordion('activate', "#item-1");
});

Answer 2

我对手风琴的东西不是很熟悉，因为我只用过几次，但是在你的鼠标悬停中你不应该使用#item-1 而不是#selected-menu 吗？