4

mouseblur イベントで jQuery UI サブメニューが開いたままになるのは面倒だと思います。( http://api.jqueryui.com/menuの下部を参照してください。)

イベント後しばらくしてからメニューを折りたたむ方法をいじっていましたblurが、良い解決策がありません。

  • このmenublurイベントは、すべてのメニューとメニュー項目のブラーで発生します。
  • blurサブメニューごとにカスタム イベントを作成するのは大変です。

他に何ができますか？jQuery UI メニューは不完全で、あまり考え抜かれていないように見えます。

4

1 に答える 1

6

私の戦略は、イベントがトリガーmenublurされたときにリセットされる各イベントにタイマーを作成することです。menufocusサブメニューが開いていて、メニュー全体からマウスを離すと、最後のイベントになるmenublurので、事前定義された時間が経過するとメニューを折りたたむことができます。

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>
            <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>

JavaScript:

$(document).ready(function() {
    var menu = $('#menu');
    menu.menu();

    var blurTimer;
    var blurTimeAbandoned = 200;  // time in ms for when menu is consider no longer in focus

    menu.on('menufocus', function() {
        clearTimeout(blurTimer);
    });

    menu.on('menublur', function(event) {
        blurTimer = setTimeout(function() {
            menu.menu("collapseAll", null, true );
        }, blurTimeAbandoned);
    });
});

デモ: jsfiddle </p>

リファレンス: setTimeout、clearTimeout

于 2012-12-08T07:42:48.707 に答える