jQuery UI Accordion - повторно активировать активный элемент по умолчанию при наведении мыши - PullRequest
1 голос
/ 29 сентября 2010

Я использую гармошку для навигации, и мне нужно, чтобы каждый элемент становился активным при наведении мыши, но при наведении мыши первоначальный активный элемент должен расширяться вместо последнего зависшего.

Это то, что яm пытаюсь:

<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 расширяется, как и должно быть.Если я наведу указатель мыши на # item-2, # item-2-content развернется и # item-1-content сократится, как и должно быть.Когда я перемещаю мышь за пределы аккордеона, # item-1-content должен снова стать расширенным элементом, но этого не происходит.

Если я опускаю функцию обратного вызова mouseout, последний элемент hovered остаетсяактивный.Если я оставлю это таким образом, «mouseout» будет запущен, даже если вы на самом деле не «покинете» аккордеон из-за барботирования событий, приводящего к странному поведению.Есть ли способ достичь этой функциональности с помощью сочетания опций аккордеона?

Ответы [ 2 ]

2 голосов
/ 14 января 2011

Обратите внимание на разницу между "mouseout" и "mouseleave" и между установкой "активной" опции аккордеона и активацией части контента! Правильный js-код должен быть:

$("#accordion").accordion({
    event: "mouseover",
    active: "#item-1",
    collapsible: false
}).mouseleave(function() {
    $(this).accordion('activate', "#item-1");
});
0 голосов
/ 29 сентября 2010

Я не так хорошо знаком с аккордеонными вещами, потому что я использовал их всего пару раз, но в своей мышке не следует ли использовать # item-1 вместо # selected-menu?

...