阅读量:0
要在jQuery下拉菜单中支持键盘导航，您可以使用以下方法：
- 首先，请确保您已经在项目中包含了jQuery库。如果没有，请在HTML文件的
<head>部分添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> - 创建一个包含下拉菜单的HTML结构。例如：
<div class="dropdown"> <button class="dropdown-btn">菜单</button> <div class="dropdown-menu"> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> </div> </div> - 接下来，编写jQuery代码以处理键盘事件。将以下代码添加到您的JavaScript文件中，或者将其放在
<script>标签内，位于HTML文件的底部：
$(document).ready(function () { // 隐藏下拉菜单 $(".dropdown-menu").hide(); // 为下拉按钮添加点击事件，用于显示和隐藏下拉菜单 $(".dropdown-btn").on("click", function (e) { e.stopPropagation(); // 阻止事件冒泡，以免触发下面的全局点击事件 $(this).next(".dropdown-menu").toggle(); }); // 为文档添加点击事件，用于在点击页面任意位置时隐藏下拉菜单 $(document).on("click", function () { $(".dropdown-menu").hide(); }); // 为下拉菜单内的每个链接添加点击事件，用于导航到相应链接 $(".dropdown-menu a").on("click", function (e) { e.stopPropagation(); // 阻止事件冒泡，以免触发上面的全局点击事件 var href = $(this).attr("href"); window.location.href = href; }); // 为下拉菜单添加键盘事件监听 $(document).keydown(function (e) { var keyCode = e.which; // 如果按下的键是空格键或回车键，显示或隐藏下拉菜单 if (keyCode === 32 || keyCode === 13) { $(".dropdown-btn").click(); } }); }); 现在，您应该可以通过键盘导航来展开和收起下拉菜单，并通过点击其中的链接进行导航。
