首页 文章

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

提问于
浏览 次
1

我正在使用手风琴进行导航，我需要每个元素在鼠标悬停时变为活动状态，但在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”，导致奇怪的行为 .

我是否应该防止手风琴元件冒泡或是否有办法通过手风琴选项的组合来实现这一功能？

jquery jquery-ui accordion

2 回答

  • 0

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

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

    我对手风琴的东西并不是很熟悉，因为我只使用了几次，但是在鼠标输出中你不应该使用＃item-1而不是＃selected-menu？

    回复于

相关问题