Jquery UI 1.9 Menu - 你如何保持活动菜单项突出显示？答案

【问题标题】：Jquery UI 1.9 Menu - How do you keep active menu item highlighted?Jquery UI 1.9 Menu - 你如何保持活动菜单项突出显示？
【发布时间】：2013-02-20 19:42:26
【问题描述】：

我正在使用 Jquery UI“菜单”API 在应用程序中创建导航菜单。

菜单绘制和链接很好，当悬停在它上面时，会应用自然的 jquery ui css，为悬停的元素提供 ui-state-focus 类。当您将鼠标从元素上移开时，它会删除此类，这会将元素置于默认的未突出显示状态。

我已经尝试添加标准的 jquery ui css 类“ui-state-active”，它将特定的 CSS 应用于给定此类的菜单中的元素。但是，当悬停任何其他元素时，此 ui-state-active 类将从活动元素中移除，从而有效地使悬停终止活动选择，即使尚未进行新选择（通过单击）。

我希望能够保持悬停类的添加，但保持 ACTIVE 类不变，以便在每个页面上，活动菜单元素将始终具有活动类。

关于在 jquery UI 菜单 api 中标记活动元素的正确方法有什么想法吗？

【问题讨论】：

标签： jquery jquery-ui menu jquery-ui-menu jqui

【解决方案1】：

我建议为所选项目创建一个单独的类（您可以复制现有的 ui-state-active 并将其重命名为 selected 之类的名称），然后：。

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

希望对你有帮助

【讨论】：

搞笑。我只是按照你的回答做了这个。我创建了一个完全不同的类，它在 JQ UI 中不存在，因此 JQ UI Menu API 不会删除它。

【解决方案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

【讨论】：

对不起，也许我误解了这个问题。我正在努力失去焦点而不是关闭^^我读过之后发现你可能正在考虑关闭^^
试试这个方法：if ((event === undefined && fromFocus === undefined) || (event && event.type === "mouseout"))