jquery - 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 ​</p>

参考：setTimeout , clearTimeout