将焦点更改为大型菜单 [英] Change focus to mega menu

问题描述

我正在使用 jquery jdiv 插件 用于大型菜单.

I'm using the jquery jdiv plugin for mega menus.

如何使用 jquery 允许用户通过键盘(选项卡)进入超级菜单(显示链接悬停或聚焦时的 div)?

How can I use jquery to allow the user to keyboard(tab) to the mega menu(div that shows when a link is hovered or focused)?

超级菜单失去焦点后，我希望焦点返回到下一个导航栏链接.

After the mega menu loses focus, I would like the focus to return to the next navigation bar link.

基本上，我只是想让所有键盘都可以访问.

Basically, I'm just trying to make this all keyboard accessible.

谢谢

推荐答案

Tabbing 到页面中的元素为其提供焦点，这来自 focus() 的 jQuery API 文档:

Tabbing to an element in the page gives it focus, this is from the jQuery API docs for focus():

元素可以通过键盘命令(例如 Tab 键)或鼠标点击元素获得焦点.

An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

在您的问题中，您建议 jQuery jdiv 插件支持在特定链接获得焦点时打开 div，因此您应该能够启用该选项.

In your question you suggest that the jQuery jdiv plugin supports opening the div when the particular link gains focus, thus you should just be able to enable that option.

如果它不提供该功能，那么您可以很容易地连接到插件中.

If it does not provide that feature then you could quite easily hook into the plugin.

$('.mega-menu-item').focus(function() {
    // Do whatever it is you do to reveal the respective hidden div
    $('.mega-menu-item .hidden-div').show();
});

这篇关于将焦点更改为大型菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！