jQuery UI Accordion - 在鼠標移除時重新激活默認的活動元素

我正在使用手風琴進行導航，我需要每個元素都在mouseover上變爲活動狀態，但在mouseout上，最初的活動元素應該展開，而不是最後一個。jQuery UI Accordion - 在鼠標移除時重新激活默認的活動元素

這就是我想：

<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'); 
});

在頁面加載，＃項目-1含量是像它應該擴大。如果我將鼠標移到＃item-2上，＃item-2內容展開和＃item-1-content縮小，就像他們應該那樣。當我將鼠標移動到手風琴之外時，＃item-1-content應該再次成爲擴展元素，但這不會發生。

如果我省略「mouseout」回調，則最後一個懸停元素保持活動狀態。如果我以這種方式離開，即使您沒有因爲事件冒泡而實際「離開」手風琴，也會觸發「鼠標移出」，導致出現奇怪的行爲。

我應該防止手風琴元件冒泡嗎？還是有辦法通過手風琴選項的組合來實現此功能？

來源

2010-09-29 andu

注意difference between "mouseout" and "mouseleave"之間和設置手風琴的「活動」 - 選擇和激活內容部分之間！正確的js碼應該是：

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

來源

2011-01-14 18:09:48 Basti

我不是那麼熟悉手風琴的東西，因爲我只用過它幾次，但在你的鼠標中你應該沒有使用＃item-1而不是＃selected-menu？

來源

2010-09-29 14:38:55 Aaron

我編輯了這個問題，希望現在清楚。 .end（）沒有幫助 – andu 2010-09-29 16:12:09

是的，它應該是＃item-1，那只是一個複製粘貼錯誤。與此同時，我用自定義腳本而不是插件解決了問題，但我仍然想知道答案 – andu 2010-10-01 14:12:38

jQuery UI Accordion - 在鼠標移除時重新激活默認的活動元素

回答

相關問題