Bootstrap 悬停时下拉

Question

我在 Angular 中有一个项目问题是 bootstrap 5 下拉菜单，我想在悬停时在导航栏中间显示下拉菜单，问题是我使用 .show class 使它出现在中间但是这个 class 只在你点击下拉菜单时出现，如果我不点击并且只悬停，下拉菜单通常显示在li 的底部。这里有一些图片向您展示我想要的东西。

这是我悬停时的样子

这就是它的样子如果我点击下拉菜单，请注意 class show 出现

所以我需要的是让下拉菜单在悬停时工作，因为它在点击时工作，因为这个 class 使下拉菜单显示在中间，这是 stackblitz 代码，我不知道为什么点击时下拉菜单不起作用，但我只需要让它与悬停一起工作，我还把我的代码留给你：

HTML:

<li class="nav-item dropdown position-static me-lg-3">
        <a class="nav-link dropdown-toggle" id="drop" role="button" data-bs-toggle="dropdown" aria-expanded="false">Temas</a>
        <div class="dropdown-menu" aria-labelledby="drop">
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
          <a class="dropdown-item" href="../default/">Default</a>
          <a class="dropdown-item" href="../united/">United</a>
          <a class="dropdown-item" href="../yeti/">Yeti</a>
        </div>
      </li>

CSS:

.dropdown:hover .dropdown-menu {
  display: flex;
  flex-wrap: wrap;
}

.dropdown-menu.show {
  width: 40%;
  margin-left: 29vw;
}

.dropdown-item {
  width: 25% !important;
}

Answer 1

好的，所以在阅读了很多 boostrap 文档之后，看到当我点击 de dropdown 和 Jquery 编码时代码发生了哪些变化，我让它工作了，这就是我所做的：

首先我注意到，当您单击下拉菜单时 html 中的此更改：

li 内的 a 元素与 class dropdown 具有 class show 和 aria-expanded 改为真。
还有classdropdown-menudiv和classdropdownli还有class shown 并添加 attribute data-bs-popper = none。

考虑到这一点，我编写了 2 个函数来获取 class dropdown 并观察鼠标何时悬停此元素，因此当鼠标进入时我添加了 classes和属性，当鼠标离开时，我删除了 classes 和属性，这就是它的样子：

$('.dropdown').on("mouseenter", () => {
    $(".dropdown > a").addClass('show')
    $(".dropdown > a").attr("aria-expanded","true");
    $(".dropdown > div").attr("data-bs-popper","none");
    $(".dropdown > div").addClass('show')
  })

$('.dropdown').on("mouseleave", () => {
    $(".dropdown > a").removeClass('show')
    $(".dropdown > a").attr("aria-expanded","false");
    $(".dropdown > div").removeAttr("data-bs-popper","none");
    $(".dropdown > div").removeClass('show')
  })

如您所见，我使用 class dropdown 和 select a 和 div 元素 li添加或删除 classes 和属性，这是简单的代码：

<li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" id="drop" role="button" data-bs-toggle="dropdown" aria-expanded="false">Temas</a>
     <div class="dropdown-menu" aria-labelledby="drop">
           <a class="dropdown-item" href="../default/">Default</a>
           <a class="dropdown-item" href="../united/">United</a>
           <a class="dropdown-item" href="../yeti/">Yeti</a>
     </div>
</li>

最后在 CSS 中添加 margin-top: -1vh 以便在鼠标移动到元素时打开下拉菜单，所以最后的 css 是这样的：

.dropdown:hover .dropdown-menu {
  display: flex;
  flex-wrap: wrap;
}

.dropdown-menu.show {
  margin-top: -1vh;
  width: 40%;
  margin-left: 38vw;
}

.dropdown-item {
  width: 25% !important;
}

Bootstrap 悬停时下拉

Bootstrap dropdown on hover

html

css

bootstrap-4

angular