jQuery UI菜单崩溃模糊

Question

我认为jQuery UI子菜单在mouseblur事件上保持打开很烦人.(参见http://api.jqueryui.com/menu的底部.)

在blur事件发生一段时间之后,我一直在玩弄如何折叠菜单,但是没有一个好的解决方案.

• menublur每个菜单和菜单项模糊都会触发该事件.
• blur为每个子菜单创建自定义事件非常糟糕.

我还能做什么？jQuery UI菜单似乎不完整,并没有经过深思熟虑.

Answer 1

我的策略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

参考:setTimeout,clearTimeout