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

Answer 1

这是一个采用动态方法的更新代码片段，方法是获取 下划线元素，并在 下划线元素上使用 forEach 循环 nodelist 将

window

上的 keydown 事件与每个 进行比较带下划线的元素 textContent 转换为小写。

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

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

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

document.addEventListener("DOMContentLoaded", function() {
  // define a dropdownMenu variable using the dropdown instatiation button
  const dropdownMenu = document.querySelector('.dropdown-menu');
  // helper method passing in the underlined elements nodelist
  // and both the action click and window keydown events 
  const setClickForUnderlinedEls = (els, target, key) => {
    // get the dropdown parent element using the 
    // event.target => target.nextElementSibling
    // you could also go with .closest() and then querySelectorAll()
    const nextEl = target.nextElementSibling;
    // loop over the underline elements nodelist
    els.forEach(sec => {
      // conditional to compare each nodelist with 
      // the key that was actually pressed
      if (key === sec.textContent.toLowerCase()) {
        // instantiate a click for the corresponding matching
        // element that has the underlined element within it
        sec.click()
      }
    })
  }
  // get the dropdown expansion button, I used an ID for this 
  // as the class .btn is pretty common for bootstrap buttons
  const action = document.querySelector('#dropdown-btn');
  // define a variable for the underline elements nodelist
  const sections = dropdownMenu.querySelectorAll('li u');
  // click event for the dropdown button
  action.addEventListener('click', (event) => {
    // window event listener for keydown
    addEventListener('keydown', function(e) {
      // conditional to make sure the dropdown is opened
      // using the aria-expanded attribute
      if (event.target.ariaExpanded !== 'false') {
        // run helper function and pass in 
        // nodelist, target parent element and keydown event.key params
        setClickForUnderlinedEls(sections, event.target, 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, target, key) => {
    const nextEl = target.nextElementSibling;
    els.forEach(sec => {
      if (key === sec.textContent.toLowerCase()) {
        sec.click()
      }
    });
  }
  action.addEventListener('click', (event) => {
    addEventListener('keydown', (e) => {
      if (event.target.ariaExpanded !== 'false') {
        setClickForUnderlinedEls(sections, event.target, 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>