要在jQuery下拉菜單中支持鍵盤導航,您可以使用以下方法:
<head>
部分添加以下代碼:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>
<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();
}
});
});
現在,您應該可以通過鍵盤導航來展開和收起下拉菜單,并通過點擊其中的鏈接進行導航。