javascript - 使用 Shift + Tab 为父项时运行 JS

Question

目前，我有一个下拉菜单，每当用户切换时都会显示该菜单。现在，我尝试添加功能，以便每当用户 Shift + Tab 返回父项时隐藏下拉菜单。我尝试使用 focus() 和 blur() 但它会在它实际向上运行之前运行，如果我在第二个子项目上并将选项卡移回首先，我收到以下警报:

$('#menu-main-menu ul.submenu li:first-child a').blur().on('keyup', function(e){
    if(e.which == 9 && e.shiftKey){
        alert('shift');
    }
});

我也 created a JSFiddle以运行此代码为例。

每当用户按 Shift + Tab 键返回到列表中的父项时，如何运行一些 JS 代码？

Answer 1

真正的问题是用户将焦点从子项移至父项，但子项在应该保持可见时却消失了。解决方案是在隐藏菜单项之前使用setTimeout。父项需要监听自身的“焦点”事件，然后取消setTimeout。

当setTimeout到期并执行回调函数时，只有然后才应该隐藏子菜单。

JsFiddle:http://jsfiddle.net/bL1p8gwk/5/

$("#mainmenu>li").each(function(idx, menu) {
    console.info("Create menu: ", idx, menu);

    var timeout = 250,
        timer = null,
        $currentItem = null,
        hideMenu = function() {
            console.info("Hide menu " + idx + ": ", $currentItem);
            $currentItem.next("ul.submenu").hide();
            $currentItem.closest("ul.submenu").hide();
            timer = null;
            $currentItem = null;
        };

    $(menu)
        .on("focusout", function(event) {
            $currentItem = $(event.target);
            timer = setTimeout(hideMenu, timeout);
        })
        .on("focusin", function(event) {
            console.info("Focusin: " + idx);

            if (timer) {
                console.info("Stop timer " + idx + ": " + timer);
                clearTimeout(timer);
                timer = null;
            }

            console.info("Show sub menu: " + idx);
            $(event.target).next("ul.submenu").show();
        });
});

和 HTML:

<ul id="mainmenu">
    <li>
        <a href="javascript:void(0);">Products</a>
        <ul class="submenu" style="display: none">
            <li><a href="javascript:void(0);">Search</a></li>
            <li><a href="javascript:void(0);">Featured</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0);">Services</a>
        <ul class="submenu" style="display: none">
            <li><a href="javascript:void(0);">Commercial</a></li>
            <li><a href="javascript:void(0);">Government</a></li>
        </ul>
    </li>
</ul>