Подменю меню jQuery-ui не разрушается при наведении мыши

Question

Я играю с виджетом меню Jquery-ui, и я пытаюсь получить некоторую функциональность, которая, кажется, должна быть ДЕЙСТВИТЕЛЬНО очевидной... но я мог пропустить это, или, возможно, они сделали, когда они писали это.

Я смог достаточно легко вывести меню в горизонтальное положение и заставить подменю опускаться вертикально... но, по жизни, я не могу заставить подменю сворачиваться при наведении мыши на меню. Он просто остается там, пока я не нажму на что-нибудь еще. Действительно раздражает. Как дизайнер, это идет вразрез со всеми моими чувствами, и я не вижу причин для этого просто висеть там.

Я сломал вещь, или мне нужно добавить что-то особенное? В качестве примечания я пару часов возился с Jquery-ui js, редактируя виджет меню. Я возился здесь:

// DEFAULT FUNCTION:
    // 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
            this.mouseHandled = false;
        },
        // I ADDED THIS:
        mouseout: function( event ) {
            this.collapseAll( event );
        }
    });

Это привело к поведению, к которому я стремился... вроде... Теперь у меня есть пятнистое обнаружение ввода мыши для моего пункта меню с вложенным подменю. Не очень хорошо с размещением живого сайта, где меню работает только иногда. Есть идеи? Я делаю это нелегко или неправильно, или я просто не знаю, о чем? Я не лучший с jQuery, только начал на самом деле.

Я использую настройку, которая в основном является дополненной версией примера на демонстрационной странице пользовательского интерфейса jQuery виджета меню, поэтому я не думаю, что это мой HTML, который вызывает проблему.

Answer 1

У меня была такая же проблема, и я нашел решение здесь. Я надеюсь, что это работает с вами.

Answer 2

Хорошо, это просто заняло некоторые поиски.

Я использовал пример jplfl в предыдущем ответе в качестве руководства и пошел в файл jquery-ui.js, ища любые функции, связанные с меню. Я нашел строку # 9715, где mouseleave был привязан к "collapseAll" вместо вызова функции, которая фактически свернула меню. Я изменил это на это:

    mouseleave: function( event ){
        this.collapseAll( event, true );
    },

И теперь это работает.

Так что да. Ответ jplfl был определенно полезен, но я подумал, что это может быть уместно, так как он углубляется в некоторые детали.

Answer 3

Я не уверен, будет ли это работать:

$(document).ready(function() {
$(“#menu”).menu({
mouseleave: function( event ){ this.collapseAll( event, true ); }
});

Но я уверен, что есть другой вариант. Вы можете проверить эту ссылку:

Answer 4

Аарон: Просто поищи "ui.menu" и прокручивай вниз, пока не увидишь строку mouseleave: "collapseAll", для меня это 11507 (jquery-ui-1.10.3)