目前,我有一个下拉菜单,每当用户切换时都会显示该菜单。现在,我尝试添加功能,以便每当用户 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 代码?
最佳答案
真正的问题是用户将焦点从子项移至父项,但子项在应该保持可见时却消失了。解决方案是在隐藏菜单项之前使用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>
关于javascript - 使用 Shift + Tab 为父项时运行 JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25790651/