jquery - jQuery 检测何时在菜单中滑动，或者他的孩子在使用选项卡导航时失去焦点

Question

大家好，我正在寻找一种解决方案，以在使用键盘（选项卡或左右箭头）导航时关闭滑入式菜单。

我可以打开菜单并在其中导航没有问题。但是我想检测$('#menu')作为子元素的元素或任何元素何时$('#menu')失去焦点并通过删除 class 来关闭滑入式菜单$('.open')。

我试过$('#menu').focusOut()了，但它只检查$('#menu')自身的焦点，所以当我在子元素中时，li它$('#menu')会关闭菜单，这是我不希望发生的。

标签： jqueryfocusaccessibilitylost-focus

Answer 1

我找到了一个非常适合我的情况的解决方案。当我点击打开菜单时，我添加了一个事件监听器，它调用了 onFocus 函数。

该函数检查具有焦点的元素是否是$('#menu')关闭菜单的子元素并删除事件侦听器。

document.addEventListener('focusin', onFocus);

function onFocus(e) {
  if(!$('#menu').find(e.target).length) {
    $('#menu').fadeToggle();
    $('#menu').toggleClass("open");
    document.removeEventListener('focusin', onFocus);
  }
}