jQuery下拉菜单如何支持键盘导航

jquery

小樊

2024-10-15 05:21:49

栏目: 编程语言

要在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();
    }
  });
});

现在，您应该可以通过键盘导航来展开和收起下拉菜单，并通过点击其中的链接进行导航。

jQuery下拉菜单如何支持键盘导航

最新问答

相关标签