Question

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

这就是我正在尝试的：

<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？

jQuery UI Accordion - 在mouseout上重新激活默认的活动元素

2 个答案: