如何在 Bootstrap 5 中单击下拉菜单时激活第一个菜单项

Question

Bootstrap 5 下拉菜单定义为

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

如果单击“操作”按钮，第一个菜单项“操作”未激活（突出显示）：

需要按向下箭头才能激活它：

如何修复它，以便打开下拉菜单突出显示第一项，就像普通 Windows 桌面应用程序菜单中一样？

Answer 1

您只需在引导程序中添加内置的

active

类，它就会为您提供蓝色背景。只需获取下拉菜单中的第一个链接并将

active

添加到其 classList 即可。

使用 Boot Strap 时有一些注意事项。超越 BS 课程通常具有挑战性。将

a

标签类设置为

dropdown-item

时，背景默认设置为“透明”，这不能用类覆盖，除非您的类来自具有相同名称并位于 BS CSS 下的 css 样式表CDN。但是内联样式会覆盖背景。

此外，如果您希望下拉菜单项具有悬停效果，您可以使用 JS eventListeners 来设置内联样式，就像我对代码片段中的代码所做的那样。

如果您只想要第一个项目集 -

document.addEventListener("DOMContentLoaded", function() {
  // using built in active class from bootstrap
  // use querySelector() to get first occurance of an element
  const sections = document.querySelector('li a');
  // get first element of the nodelist and add active class to classList
  sections.classList.add('active');

  // using inline style to override BS dorpdow-item class
  const dropdown2 = document.querySelectorAll('.dropdown-menu')[1];
  const sections2 = dropdown2.querySelector('li a');
  sections2.style.backgroundColor = 'rgb(225,225,255)';
});

/* added to remove any mouseover events from firing on hover of underlined element */

u {
  pointer-events: none;
}

<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>
<div class="d-flex justify-content-around">
  <!-- Example single danger button -->
  <div class="btn-group">
    <!--/ Added the id dropdown-btn for this example /-->
    <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="#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>
  <br><br>
  <!-- Example single danger button -->
  <div class="btn-group">
    <!--/ Added the id dropdown-btn for this example /-->
    <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="#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>

如果您想在其他链接上鼠标悬停（悬停）-

document.addEventListener("DOMContentLoaded", function() {
  const dropdownMenu = document.querySelector('.dropdown-menu');
  const action = document.querySelector('.btn');
  const sections = dropdownMenu.querySelectorAll('li a');
  // get first element of the nodelist and set to active
  sections[0].classList.add('active');
  // override the bootstrap dropdown-item classes background
  // which is set to transparent by default
  // while built in class `active` is present 
  // using a method with mouseover/mouseout events
  const highlight = (e) => {
    // conditional event type is mouseover and target is not the active class
    if(e.type === 'mouseover' && !e.target.classList.contains('active')){
      // override the bootstrap transparent background 
      // using inline styles for hovered links
      e.target.style.backgroundColor = 'rgb(225, 225, 225)';
    // else if conditional for mouseout and target is not the active class
    }else if(e.type === 'mouseout' && !e.target.classList.contains('active')){  
      // reset the bootstrap transparent background using inline styles  
      e.target.style.backgroundColor = 'transparent';
    }
  }
  // loop over the dropdown links and add eventListsners calling highlight method
  sections.forEach(sec => {
    sec.addEventListener('mouseover', highlight);
    sec.addEventListener('mouseout', highlight);
  })
});

/* added to remove any mouseover events from firing on hover of underlined element */
u {
  pointer-events: none;
}

<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">
  <!--/ Added the id dropdown-btn for this example /-->
  <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="#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>

您还可以使用内联样式为第一个项目定义自己的样式 -

document.addEventListener("DOMContentLoaded", function() {
  const dropdownMenu = document.querySelector('.dropdown-menu');
  const action = document.querySelector('.btn');
  const sections = dropdownMenu.querySelectorAll('li a');
  // get first element of the nodelist and background-color
  sections[0].style.backgroundColor = 'rgb(190, 190, 190)';
  // override the bootstrap dropdown-item classes background
  // which is set to transparent by default
  // while built in class `active` is present 
  // using a method with mouseover/mouseout events
  const highlight = (e) => {
    // conditional event type is mouseover and target is not the first item
    if(e.type === 'mouseover' && e.target !== sections[0]){
      // override the bootstrap transparent background 
      // using inline styles for hovered links
      e.target.style.backgroundColor = 'rgb(225, 225, 225)';
    // else if conditional for mouseout andtarget is not the first item
    }else if(e.type === 'mouseout' && e.target !== sections[0]){  
      // reset the bootstrap transparent background using inline styles  
      e.target.style.backgroundColor = 'transparent';
    }
  }
  // loop over the dropdown links and add eventListsners calling highlight method
  sections.forEach(sec => {
    sec.addEventListener('mouseover', highlight);
    sec.addEventListener('mouseout', highlight);
  })
});

/* added to remove any mouseover events from firing on hover of underlined element */
u {
  pointer-events: none;
}

<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">
  <!--/ Added the id dropdown-btn for this example /-->
  <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="#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>