Question

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

在搜索之后，我终于找到了以下我想要的演示：

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

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

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

任何帮助表示感谢。

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

第二部分确保当用户点击菜单（this.document）外的页面（.ui-menu）时折叠所有菜单：调用this.collapseAll()，调用{{1} }}，反过来调用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" });）并初始化它们，包括隐藏它们。

无法理解jQuery-UI弹出菜单

3 个答案: