javascript - 无法理解 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

正如Jörn Zaefferer所说，您引用的jQuery UI Popup - Popup Menu使用未发布的代码。（请注意，Jörn 是关闭错误的同一个人）

但是在jQuery UI Button 的 Split Button 示例中有一个几乎相同的解决方案，它不使用.popup()并且明确地执行所有隐藏等。

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

Answer 3

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

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

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

至于您的第一个问题，该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()）并初始化它们，包括隐藏它们。