主页 / coding / 问题 / 78857077
Accepted
Andrus
Asked: 2024-08-11 05:24:25 +0800 CST

如何通过按键盘键激活引导下拉菜单项

  • 772

Bootstrap 5 导航栏包含下拉菜单。
下拉菜单有带下划线的热键，如a、n、s、e：

<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>

如果按下键盘上的键，如何激活菜单项？例如，如果下拉菜单已打开，则按 A 应该像单击操作菜单项一样。

jsfiddle：https://jsfiddle.net/b6or2s5e/

左箭头和右箭头已经使用

如何使用左右箭头键在 Bootstrap 导航栏中导航

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.dropdown').forEach(function (el) {
    el.addEventListener('shown.bs.dropdown', function () {
      document.addEventListener('keydown', function (e) {
        const click = new MouseEvent("click", {
          bubbles: true,
          cancelable: true,
          view: window,
        })
        if (e.key === "ArrowRight") {
          const o = getNextSibling(e.target.closest('.dropdown'), '.dropdown')
          if (!o) {
            document.querySelector('.dropdown-toggle').dispatchEvent(click)
          } else {
            o.querySelector('.Xdropdown-toggle').dispatchEvent(click)
          }
        } else if (e.key === "ArrowLeft") {
          const o = getPrevSibling(e.target.closest('.dropdown'), '.dropdown')
          if (!o) {
            const ar = document.querySelectorAll('.dropdown-toggle')
            ar[ar.length - 1].dispatchEvent(click)
          } else {
            o.querySelector('.dropdown-toggle').dispatchEvent(click)
          }
        }
      }, { once: true })
    })
  })
})

如何添加热键处理？

javascript

1 个回答

  1. Best Answer

    以下是更新的代码片段，采用动态方法获取下划线元素，并使用forEach循环遍历下划线元素 节点列表，将窗口keydown上的事件与转换为的每个下划线元素的textContent进行比较，然后进行比较。如果匹配，我们将在匹配的元素上运行。 toLowerCase()click()

    如果没有按下 alt 或 ctrl，是否可以删除 switch 语句并针对任意键调用 findUnderlined ？

    我相信您问的是是否可以添加控制键和/或alt键，不能 100% 确定您的问题是否在这里，但您可以根据要使用 keydown 控制的内容添加任何条件。只需将逻辑添加到条件中即可。

    请参阅下面代码片段中的更多注释...

    document.addEventListener("DOMContentLoaded", function() {
  // get drop-down menu
  const dropdownMenu = document.querySelector('.dropdown-menu');
  // get action button
  const action = document.querySelector('#dropdown-btn');
  // get the underlined elements as a nodelist
  const sections = dropdownMenu.querySelectorAll('li u');
  // helper function pass in underlined els and event key
  const setClickForUnderlinedEls = (els, key) => {
    // loop over underlined elements
    els.forEach(sec => {
      // conditional to compare the underlined 
      // elements text to lowercase
      if (key === sec.textContent.toLowerCase()) {
        // simulate a click on element
        sec.click()
      }
    });
  }
  // event click on action button to open dropdown
  action.addEventListener('click', (event) => {
    // window event on keydown to check key
    addEventListener('keydown', (e) => {
      // make sure the dropdown is expanded 
      // using aria-expanded attribute
      if (event.target.ariaExpanded !== 'false') {
        // run helper function to compare the key and
        // the underlined elements textContent
        setClickForUnderlinedEls(sections, e.key);
      }
    });
  })
});


    document.addEventListener("DOMContentLoaded", function() {
  const dropdownMenu = document.querySelector('.dropdown-menu');
  const action = document.querySelector('#dropdown-btn');
  const sections = dropdownMenu.querySelectorAll('li u');
  const setClickForUnderlinedEls = (els, key) => {
    els.forEach(sec => {
      if (key === sec.textContent.toLowerCase()) {
        sec.click()
      }
    });
  }
  action.addEventListener('click', (event) => {
    addEventListener('keydown', (e) => {
      if (event.target.ariaExpanded !== 'false') {
        setClickForUnderlinedEls(sections, e.key);
      }
    });
  })
});
    #vertical-space,
#section1,
#section2,
#section3,
#section4,
#section5{
  height: 100vh;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Example single danger button -->
<div class="btn-group" id="top">
  <!--/ Added the id dropdown-btn for this example /-->
  <button id="dropdown-btn" 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="#section1"><u>A</u>ction</a></li>
    <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li>
    <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li>
    <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li>
  </ul>
</div>
<!--/ added purely for example /-->
<div id="vertical-space">
</div>
<div id="section1">
  <p>
    You pressed the <strong>a</strong> button and instantiated a click on the <em>Action</em> button. <a href="#top">Back to top</a>
  </p>
  
</div>
<div id="section2">
  <p>
    You pressed the <strong>n</strong> button and instantiated a click on the <em>Another action</em> button. <a href="#top">Back to top</a>
  </p>
</div>
<div id="section3">
  <p>
    You pressed the <strong>w</strong> button and instantiated a click on the <em>We have a link</em> button. <a href="#top">Back to top</a>
  </p>
</div>
<div id="section4">
  <p>
    You pressed the <strong>s</strong> button and instantiated a click on the <em>Something else here</em> button. <a href="#top">Back to top</a>
  </p>
</div>
<div id="section5">
  <p>
    You pressed the <strong>e</strong> button and instantiated a click on the <em>Separate link</em> button. <a href="#top">Back to top</a>
  </p>
</div>

    • 1

相关问题