jQuery UI 菜单栏幻影子菜单问题答案

【问题标题】：jQuery UI Menubar Phantom Submenu IssuejQuery UI 菜单栏幻影子菜单问题
【发布时间】：2013-05-08 19:37:10
【问题描述】：

我正在创建一个 jQuery 菜单栏，一切看起来都不错，但是当我将鼠标悬停在具有子菜单的顶级菜单项上时，我得到了一种奇怪的效果，其中第一项也有子菜单。如果我将鼠标移入和移出（在 View 菜单项上左右移动）大约 20 次，我将开始看到 View>Encoding 子菜单越来越向右移动。

我可以使用菜单栏演示示例的修改版本重新创建问题。我在 Firefox 20.0.1 上。

请看这里：http://jsfiddle.net/Njjgm/

我认为它正在寻找子子菜单的右边缘，然后将同一子子菜单的新左边缘设置到该位置......所以如果我减慢打开速度或修复定位数学，那么我不应该有这个错误。

我正在查看 jquery.ui.menubar.js 文件，看看我是否可以调整 setTimeouts，或者修复子菜单定位但没有任何运气。

我正在看这个（来自 jquery.ui.menubar.js 第 262 行）：

__applyMouseBehaviorForSubmenuHavingMenuItem: function (input, menubar) {

    var menu = input.next( menubar.options.menuElement ),
        mouseBehaviorCallback = function( event ) {
            // ignore triggered focus event
            if ( event.type === "focus" && !event.originalEvent ) {
                return;
            }

            if (event.type === "mouseenter") {

                this.element.find(":focus").focusout();
                if (this.stashedOpenMenu) {                     
                    this._open( event, menu);
                }
                this.stashedOpenMenu = undefined;
            }
            if ((this.open && event.type === "mouseenter") 
                               || this.options.autoExpand) {

                if (this.options.autoExpand) {

                    clearTimeout( this.closeTimer );
                }
                this._open( event, menu );
            }
        };

还有这个：（来自 jquery.ui.menubar.js 第 68 行）

focusin: function( event ) {
            clearTimeout( menubar.closeTimer );
        },
        focusout: function( event ) {
            menubar.closeTimer = setTimeout (function() {
                menubar._close( event );
            }, 150 );
        },
        "mouseleave .ui-menubar-item": function( event ) {
            if ( menubar.options.autoExpand ) {
                menubar.closeTimer = setTimeout( function() {
                    menubar._close( event );
                }, 150 );
            }
        },
        "mouseenter .ui-menubar-item": function( event ) {
            clearTimeout( menubar.closeTimer );
        }

以前是否有任何具有 jquery ui 菜单栏经验的人见过并修复过这个问题？有人知道 setTimeout 的修复方法吗？ HoverIntent 似乎使用与菜单栏相同的 set/clearTimeout 技术，所以我不想从菜单栏中删除所有逻辑来添加它。欢迎提出任何建议。谢谢。

【问题讨论】：

标签： jquery-ui jquery-ui-menubar

【解决方案1】：

好吧，我找到了解决这个问题的方法，虽然我没有修复错误的定位（但我想我找到了可以修复的地方）。

默认情况下，代码选择打开菜单中的第一个列表元素，如果该元素也有菜单，则该菜单也会打开。我取出了关注第一个子元素的代码（为什么它甚至需要这样做？）

来自 jquery.ui.menubar.js 第 451 行

this.active = menu
        .show()
        .position($.extend({
            of: button
        }, this.options.position));
        //.removeAttr("aria-hidden")
        //.attr("aria-expanded", "true")
        //.menu("focus", event, menu.children(".ui-menu-item").first() )
        // TODO need a comment here why both events are triggered
        //.focus()
        //.focusin();

还有 Presto-Changeo！没有更多的幻像下拉菜单...我本可以尝试找出 menu.position 但这对我有用。

【讨论】：