如何使用带有 ENTER 键的 JQuery UI 菜单？

Question

我正在开发一个需要完全由键盘控制的应用程序，到目前为止一切都很好，但是当使用 ENTER 键时，我无法使 JQuery UI 菜单小部件工作。

从文档来看，似乎没有具体的方法来完成这项工作，所以我在列表元素上使用“onclick”

  <li onclick="alert('Books Action')"><div>Books</div></li>

这是一个 jsfiddle ( https://jsfiddle.net/djbh6r82/ )，示例来自 JQuery UI 文档和第一个菜单项上的警报->当我单击它时它工作正常，但使用“ENTER”它只会带给我回到开始（专注于菜单不会丢失）

 $(function() { $("#menu").menu(); });

 .ui-menu { width: 150px; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <ul id="menu"> <li class="ui-state-disabled"> <div>Toys (n/a)</div> </li> <li onclick="alert('Books Action')"> <div>Books</div> </li> <li> <div>Clothing</div> </li> <li> <div>Electronics</div> <ul> <li class="ui-state-disabled"> <div>Home Entertainment</div> </li> <li> <div>Car Hifi</div> </li> <li> <div>Utilities</div> </li> </ul> </li> <li> <div>Movies</div> </li> <li> <div>Music</div> <ul> <li> <div>Rock</div> <ul> <li> <div>Alternative</div> </li> <li> <div>Classic</div> </li> </ul> </li> <li> <div>Jazz</div> <ul> <li> <div>Freejazz</div> </li> <li> <div>Big Band</div> </li> <li> <div>Modern</div> </li> </ul> </li> <li> <div>Pop</div> </li> </ul> </li> <li class="ui-state-disabled"> <div>Specials (n/a)</div> </li> </ul>

我做错了吗？ 我尝试了不同的东西（ <a href='#' onclick="xxx"></a>而不是 div，onclick 在 div 而不是 ul）但似乎没有任何效果

Answer 1

当您查看 API 文档时，您将在https://api.jqueryui.com/menu/下看到以下详细信息：

键盘交互

• ENTER/SPACE ：调用焦点菜单项的操作，这可能是打开子菜单。
• UP ：将焦点移至上一个菜单项。
• DOWN ：将焦点移至下一个菜单项。
• RIGHT ：打开子菜单（如果有）。
• LEFT ：关闭当前子菜单并将焦点移至父菜单项。 如果不在子菜单中，则什么也不做。
• ESCAPE ：关闭当前子菜单并将焦点移至父菜单项。 如果不在子菜单中，则什么也不做。

键入一个字母会将焦点移至标题以该字符开头的第一个项目。 通过匹配的项目重复相同的字符循环。 在一秒计时器内键入更多字符与这些字符匹配。

禁用的项目可以接收键盘焦点，但不允许任何其他交互。

因此Enter已启用，并将触发菜单的select事件。 然后，您需要在select回调中执行一些操作。

 $(function() { $("#menu").menu({ select: function(e, ui) { console.log(ui.item.text().trim(), "Selected"); } }).focus(); });

 .ui-menu { width: 150px; }

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <ul id="menu"> <li class="ui-state-disabled"> <div>Toys (n/a)</div> </li> <li> <div>Books</div> </li> <li> <div>Clothing</div> </li> <li> <div>Electronics</div> <ul> <li class="ui-state-disabled"> <div>Home Entertainment</div> </li> <li> <div>Car Hifi</div> </li> <li> <div>Utilities</div> </li> </ul> </li> <li> <div>Movies</div> </li> <li> <div>Music</div> <ul> <li> <div>Rock</div> <ul> <li> <div>Alternative</div> </li> <li> <div>Classic</div> </li> </ul> </li> <li> <div>Jazz</div> <ul> <li> <div>Freejazz</div> </li> <li> <div>Big Band</div> </li> <li> <div>Modern</div> </li> </ul> </li> <li> <div>Pop</div> </li> </ul> </li> <li class="ui-state-disabled"> <div>Specials (n/a)</div> </li> </ul>

预先给它focus允许它已经被调用。