主页 / coding / 问题 / 79081864
Accepted
Andrus
Asked: 2024-10-13 04:28:05 +0800 CST

如何允许上下箭头键在菜单中换行

  • 772

在 bootstrap 5 菜单中，在第一个项目中按向上箭头键或在最后一个项目中按向下允许键没有任何反应。

如何使向上箭头在第一个项目中按下时移动到菜单中的最后一个项目，以及使向下箭头在最后一个项目中按下时移动到第一个项目，就像在普通的 Windows 桌面应用程序菜单中一样？

重现打开的页面

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

https://jsfiddle.net/b6or2s5e/

打开操作菜单。按第一个菜单行中的向上箭头或按最后一个菜单行中的向下箭头不起作用

javascript

1 个回答

  1. Best Answer

    没有用于此的 API。我正在捕获事件keydown并关注第一个/最后一个可见的.menu-item。

    addEventListener('keydown', function(ev) {

  const SELECTOR_VISIBLE_ITEMS = '.dropdown-item:not(.disabled):not(:disabled)'
  
  var elem = ev.target;
  var menu = elem.closest(".dropdown-menu")
  if (menu) {

    var visibleChildren = [...menu.querySelectorAll(SELECTOR_VISIBLE_ITEMS)]
    var length = visibleChildren.length;
    var index = visibleChildren.indexOf(elem);
    if (length) {
      var first = visibleChildren[0]
      var last = visibleChildren[length - 1]

      if (ev.key === 'ArrowDown' && index == length - 1) {
        first.focus();
        ev.preventDefault()
        ev.stopPropagation();
        return;
      }

      if (ev.key === 'ArrowUp' && index == 0) {
        last.focus();
        ev.preventDefault()
        ev.stopPropagation();
        return;
      }

    }
  }
  // must use capture = true
}, true)
    body {
  padding: 10px;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"></link>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li>
  </ul>
</div>

    • 1

相关问题