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

jQuery UI菜单崩溃模糊

1 个答案: