jQuery UI菜单崩溃模糊

我的策略是在每个menublur事件上创建一个计时器,当触发menufocus事件时,该事件被重置.如果我们打开一个子菜单并且我们将鼠标从整个菜单中删除,则最后一个事件将是菜单,因此在预定义的时间后我们可以折叠菜单.

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