Jquery UI 1.9菜單 - 如何突出顯示活動菜單項？

Question

我正在使用Jquery UI“Menu”API在應用程序中創建導航菜單。

菜單繪制和鏈接很好，當懸停在它上面時，應用自然的jquery ui css，為懸停元素提供ui-state-focus類。 當您將鼠標移離元素時，它會刪除此類，這會將元素置於默認的非突出狀態。

我已經嘗試添加標准的jquery ui css類“ui-state-active”，它將特定的CSS應用於給定此類的菜單中的元素。 但是，當懸停任何其他元素時，這個ui-state-active類將從活動元素中刪除，即使尚未進行新選擇（單擊），也會有效地使懸停終止活動選擇。

我希望能夠保持懸停類的添加，但保持ACTIVE類完整，以便在每個頁面上，活動菜單元素將始終具有活動類。

關於在jquery UI菜單api中標記活動元素的正確方法的任何想法？

Answer 1

我建議為所選項目創建一個單獨的類（您可以復制現有的ui-state-active並將其重命名為選中的項目）然后：

    $("#menu").find("a").click(function(){
    $("#menu").find("a").removeClass("selected");//remove if something was selected
    $(this).addClass("selected");//add a selected class
    });

希望有所幫助

Answer 2

jQuery.widget("ui.menu", jQuery.ui.menu, {
    blur: function( event, fromFocus ) {
        if (event && event.type === "mouseout"))
            return this;
        else 
            return this._super(event, fromFocus);
    } 
});

僅適用於jQuery> = 1.9