溫馨提示×

jQuery下拉菜單如何支持鍵盤導(dǎo)航

小樊
81
2024-10-15 05:21:49
欄目: 編程語言

要在jQuery下拉菜單中支持鍵盤導(dǎo)航，您可以使用以下方法：

  1. 首先，請確保您已經(jīng)在項目中包含了jQuery庫。如果沒有，請在HTML文件的<head>部分添加以下代碼：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. 創(chuàng)建一個包含下拉菜單的HTML結(jié)構(gòu)。例如：
<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>
  1. 接下來，編寫jQuery代碼以處理鍵盤事件。將以下代碼添加到您的JavaScript文件中，或者將其放在<script>標(biāo)簽內(nèi)，位于HTML文件的底部：
$(document).ready(function () {
  // 隱藏下拉菜單
  $(".dropdown-menu").hide();

  // 為下拉按鈕添加點擊事件，用于顯示和隱藏下拉菜單
  $(".dropdown-btn").on("click", function (e) {
    e.stopPropagation(); // 阻止事件冒泡，以免觸發(fā)下面的全局點擊事件
    $(this).next(".dropdown-menu").toggle();
  });

  // 為文檔添加點擊事件，用于在點擊頁面任意位置時隱藏下拉菜單
  $(document).on("click", function () {
    $(".dropdown-menu").hide();
  });

  // 為下拉菜單內(nèi)的每個鏈接添加點擊事件，用于導(dǎo)航到相應(yīng)鏈接
  $(".dropdown-menu a").on("click", function (e) {
    e.stopPropagation(); // 阻止事件冒泡，以免觸發(fā)上面的全局點擊事件
    var href = $(this).attr("href");
    window.location.href = href;
  });

  // 為下拉菜單添加鍵盤事件監(jiān)聽
  $(document).keydown(function (e) {
    var keyCode = e.which;

    // 如果按下的鍵是空格鍵或回車鍵，顯示或隱藏下拉菜單
    if (keyCode === 32 || keyCode === 13) {
      $(".dropdown-btn").click();
    }
  });
});

現(xiàn)在，您應(yīng)該可以通過鍵盤導(dǎo)航來展開和收起下拉菜單，并通過點擊其中的鏈接進(jìn)行導(dǎo)航。

0 踩