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

デモ URL : http://api.jquery.com/mouseout/

于 2012-10-29T12:54:47.767 に答える