Меню от jquery-ui

Question

Я использовал функцию меню из jQuery-UI. Смотрите мой пример скрипки

Моя проблема в том, что когда вы наводите курсор мыши на меню и выходите, все подменю тоже выходят. Но когда вы находитесь в подменю и выходите, подменю остается открытым. он не закроется, пока вы не нажмете вне меню

Я пытался добавить этот код, но он не будет работать:

$("#menu").mouseleave( function(){
   $(".ui-menu-item").collapseAll();
});

Я хочу, чтобы подменю тоже исчезло, как только я уйду с помощью мыши

Answer 1

Я думаю, что это будет полезно для вас.

Добавить класс submenu за <ul> тег.

HTML

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul class="submenu">
            <li><a href="#">Item 3-1</a></li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

JQuery

$(".submenu").mouseout( function(){
   $(".submenu").hide();
});
$(".submenu").mouseover( function(){
   $(".submenu").show();
});

URL-адрес демонстрации: http://api.jquery.com/mouseout/

Answer 2

ОБНОВИТЬ:

Я нашел лучшую документацию на http://api.jqueryui.com/menu/ и похоже, что вы хотите использовать collapseAll метод на mouseleave, Обновленная скрипка здесь: http://jsfiddle.net/FwBNE/7/

$(document).ready(function() {
    var menu = $("ul.menu").menu();
    $(menu).mouseleave(function () {
        menu.menu('collapseAll');
    });
});​

ОРИГИНАЛ:

Это похоже на работу:

$(document).ready(function() {
    var menu = $("div#menu > ul.menu").menu();
    menu.menu('widget').hide();
    $('div#menu').hover(function () {
        menu.menu('widget').show();
    }, function () {
        menu.menu('widget').hide();
    });
    $(menu).hover(function () {
        menu.menu('widget').show();
    }, function () {
        menu.menu('widget').hide();
    });
});​

Обновленная скрипка: http://jsfiddle.net/FwBNE/4/