如何让Bootstrap 5导航栏支持键盘操作 实现方向键切换下拉菜单、快捷键激活菜单项

失效原因 #

1. Bootstrap 5 下拉菜单内置了上下方向键选择菜单项的逻辑，会默认拦截方向键事件，导致原有绑定的左右方向键监听无法触发
2. 原有代码直接触发click切换下拉的逻辑，与Bootstrap 5 内置组件逻辑冲突，未调用官方API操作组件状态
3. 现有导航栏所有下拉触发按钮ID重复，不符合HTML规范，会导致组件功能异常

实现步骤 #

第一步：修正导航栏ID重复问题 #

把每个下拉触发按钮的ID和对应下拉菜单的aria-labelledby属性改为唯一值，修改示例如下（仅列调整部分）：

<!-- 第一个下拉 -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  Dropdown1
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">

<!-- 第二个下拉 -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  Dropdown2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">

<!-- 第三个下拉 -->
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  Dropdown3
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown3">

第二步：添加功能实现JS代码 #

以下代码同时支持左右方向键切换下拉菜单、下划线标注的字母快捷键触发对应菜单项，兼容Bootstrap 5和jQuery：

$(document).ready(function () {
    // 存储当前激活的下拉菜单元素
    let activeDropdown = null;

    // 监听下拉菜单展示事件，记录当前激活的下拉
    $('.dropdown').on('shown.bs.dropdown', function () {
        activeDropdown = $(this);
    });

    // 监听下拉菜单隐藏事件，清空激活状态
    $('.dropdown').on('hidden.bs.dropdown', function () {
        activeDropdown = null;
    });

    // 全局绑定键盘事件
    $(document).on('keydown', function (e) {
        // 无激活下拉时不处理逻辑
        if (!activeDropdown) return;

        // 处理左右方向键切换下拉
        if (e.which === 37 || e.which === 39) {
            e.preventDefault();
            e.stopImmediatePropagation();
            // 匹配上一个/下一个下拉元素
            const targetDropdown = e.which === 39 ? activeDropdown.next('.dropdown') : activeDropdown.prev('.dropdown');
            if (targetDropdown.length) {
                // 关闭当前下拉
                bootstrap.Dropdown.getInstance(activeDropdown.find('.dropdown-toggle')[0]).hide();
                // 打开目标下拉
                const targetToggle = targetDropdown.find('.dropdown-toggle')[0];
                bootstrap.Dropdown.getOrCreateInstance(targetToggle).show();
                targetToggle.focus();
            }
            return;
        }

        // 处理字母快捷键触发菜单项
        const pressedKey = e.key.toLowerCase();
        activeDropdown.find('.dropdown-item').each(function () {
            const shortcut = $(this).find('u').text().toLowerCase();
            if (shortcut === pressedKey) {
                e.preventDefault();
                // 触发菜单项点击逻辑，跳转链接、绑定事件都可正常触发
                this.click();
                // 可选：触发后自动关闭下拉，不需要可以删除下面一行
                bootstrap.Dropdown.getInstance(activeDropdown.find('.dropdown-toggle')[0]).hide();
                return false;
            }
        });
    });
});

使用说明 #

• 确保页面已引入bootstrap.bundle.min.js（包含Popper依赖，是Bootstrap 5 组件运行的必要条件）
• 字母快捷键不区分大小写，按下大写/小写对应字母都可触发匹配的菜单项
• 代码可直接放入ASP.NET 6 MVC的布局页或对应业务页的script区域运行，无需额外适配

内容的提问来源于stack exchange，提问作者Andrus