1

我正在使用 jQuery-ui 的菜单功能。请参阅我的示例小提琴

我的问题是，当您将鼠标悬停在菜单上并退出时，所有子菜单也会退出。但是，当您在子菜单中并离开时，子菜单将保持打开状态。在您单击菜单外部之前它不会关闭

我尝试添加此代码，但它不起作用：

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

一旦我用鼠标离开，我希望子菜单也消失

4

2 回答 2

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/

于 2012-10-29T12:10:12.573 回答
2

我认为这会对你有所帮助。

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

演示网址：http ://api.jquery.com/mouseout/

于 2012-10-29T12:54:47.767 回答