如何使用键盘快捷键打开/悬停到子菜单项

How to open / hover to submenu items using keyboard shortcuts

本文关键字：悬停 菜单项 何使用 键盘 快捷键      更新时间：2023-09-26

我有一个类似

的菜单
<li class="main-menu">
  <a accesskey="a">menu item 1</a>
  <ul>
    <li>
      <a accesskey="d">submenuItem1</a>
    </li>
    <li class="submenu">
      <a accesskey="e">submenuItem2</a>
      <ul>
        <li class="innermenu"><a >innerMenuItem1</a></li>
        <li><a>innerMenuItem1</a></li>
        <li><a>innerMenuItem2</a></li>
        <li><a>innerMenuItem3</a></li>
        <li><a>innerMenuItem4</a></li>
      </ul>
    </li>
  </ul>
</li>

选择主菜单项时如何悬停/显示子菜单，选择子菜单时显示内部菜单项。我很新的jquery有一些问题在做这个特别是子菜单到内部菜单。谢谢你. .

accesskey实际上只与alt键一起工作，我们可以拦截一般的keydown事件并以这种方式处理热键。如果我们拦截keydown并且它是其中一个键，我们希望在相关的li上切换.active类。然后使用CSS来隐藏和显示基于悬停/类状态的子菜单。

下面的示例使用data-key属性来设置属性，在页面加载时，我们提取键和相关元素到一个数组中。当keydown被处理时，这个数组被扫描和操作。

jsFiddle 

<ul class="main-menu">
<li data-key="65">
  <a>menu item 1 (a)</a>
  <ul>
    <li data-key="68">
      <a>submenuItem1 (d)</a>
    </li>
    <li data-key="69">
      <a>submenuItem2 (e)</a>
      <ul>
        <li><a>innerMenuItem1</a></li>
        <li><a>innerMenuItem1</a></li>
        <li><a>innerMenuItem2</a></li>
        <li><a>innerMenuItem3</a></li>
        <li><a>innerMenuItem4</a></li>
      </ul>
    </li>
  </ul>
</li>
</ul>
CSS

li ul {
    display:none;
}
li:hover > ul,
li.active > ul {
    display:block;
}

JS 

var keys = [];
$(document).ready(function () {
    $('[data-key]').each(function () {
        keys.push({
            key: $(this).attr('data-key'),
            elem: $(this)
        });
    });
});
$(window).keydown(function(e) {
    for (var i = 0; i < keys.length; i++) {
        if (e.keyCode == keys[i].key) {
            keys[i].elem.toggleClass('active');
            return;
        }
    }
});
相关文章：