无法理解 jQuery-UI 弹出菜单

Question

我正在尝试弄清楚如何使用 jQuery UI 菜单小部件制作弹出菜单。

四处搜索后，我终于找到了以下演示，可以满足我的要求：

http://view.jqueryui.com/menubar/demos/popup/popup-menu.html

但是，我在理解这个演示时遇到了一些麻烦。例如：

1. 是什么导致菜单在单击任何按钮之前隐藏？
2. 是什么导致菜单在打开时关闭，然后我单击页面上的其他位置？

任何帮助表示赞赏。

Answer 1

该演示使用 jquery.ui.menu.js 的修改版本以及弹出窗口小部件：http://view.jqueryui.com/menubar/ui/jquery.ui.popup.js

在 1.9 中发布的菜单本身没有任何代码可以将其显示为弹出窗口。我建议编写一些自定义代码来构建弹出菜单，直到稳定版本提供适当的解决方案。

Answer 2

您引用的jQuery UI Popup - Popup Menu 使用unreleased code，正如Jörn Zaefferer 所说。 （请注意，Jörn 是关闭the bug 的同一个人）

但是jQuery UI Button's Split Button example 中有一个外观几乎相同的解决方案，不使用.popup() 并明确地进行所有隐藏等。

也许您可以将其作为起点。我知道我要去！ ;-)

Answer 3

我相信这可能就是您想要的。当你调用.menu() 时，_create() 函数中会触发很多事情（正如 Derek 所说），比如设置类名等。然后，在jquery.ui.menu.js 的第 123-135 行，会发生这种情况：

    this.refresh();

    // Clicks outside of a menu collapse any open menus
    this._on( this.document, {
        click: function( event ) {
            if ( !$( event.target ).closest( ".ui-menu" ).length ) {
                this.collapseAll( event );
            }

            // Reset the mouseHandled flag
            mouseHandled = false;
        }
    });

第二部分确保当用户点击菜单 (.ui-menu) 外的页面 (this.document) 时所有菜单都被折叠：调用 this.collapseAll()，它调用 this._close()，然后调用 @ 987654329@。这应该回答你的第二个问题。

至于你的第一个问题，refresh() 函数做的第一件事是：

    // Initialize nested menus
    var menus,
        icon = this.options.icons.submenu,
        submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
            .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
            .hide()
            .attr({
                role: this.options.role,
                "aria-hidden": "true",
                "aria-expanded": "false"
            });

这会找到之前未初始化的所有子菜单（在本例中是所有子菜单，因为我们来自 _create()）并初始化它们，包括隐藏它们。