如何用jQuery实现按F键打开Bootstrap收藏侧边栏Offcanvas？

你的代码存在两个核心问题：

• 按键判断错误：你写的是监听s键，但实际需要的是f键，且keyCode是数字类型，不能用字符串对比；更推荐用e.key直接判断按键字符，可读性更强。
• 直接调用show()无效：Bootstrap的Offcanvas组件有独立的交互逻辑，不能用jQuery的show()直接显示，必须调用Bootstrap官方提供的API方法。

下面提供两种可行的实现方式：

方法一：调用Bootstrap Offcanvas实例API #

$(document).keydown(function(e) {
  // 判断是否按下f键，同时排除输入框/文本域中触发（避免干扰用户输入）
  if (e.key.toLowerCase() === 'f' && !$(e.target).is('input, textarea')) {
    e.preventDefault(); // 阻止浏览器默认F键行为（如打开页面查找框）
    // 获取Offcanvas实例并调用显示方法
    const offcanvasElement = document.getElementById('favorites');
    const offcanvas = new bootstrap.Offcanvas(offcanvasElement);
    offcanvas.show();
  }
});

方法二：模拟点击原触发按钮 #

如果页面上已存在触发Offcanvas的<a>标签，直接模拟点击它更简单：

$(document).keydown(function(e) {
  if (e.key.toLowerCase() === 'f' && !$(e.target).is('input, textarea')) {
    e.preventDefault();
    $('[data-bs-toggle="offcanvas"][data-bs-target="#favorites"]').click();
  }
});

额外说明 #

• 若不需要屏蔽浏览器默认F键行为，可删除e.preventDefault()。
• 加入输入框/文本域的判断，是为了避免用户在输入内容时误触侧边栏，提升体验。

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