悬停自举下拉

Question

我有一个角度上的项目--问题是在引导5下拉时，当悬停时，我想显示肚脐中间的下拉菜单，问题是我使用.show类使它出现在中间，但是只有在单击下拉时，这个类才会出现，如果我不单击和只悬停，下拉菜单通常显示在li底部。这里有一些图片给你看我想要什么。

这就是我悬停时的样子

​

如果单击下拉列表，请注意，当我这样做时，会出现类show。

​

所以，我需要的是使下拉菜单在鼠标悬停时工作，因为这个类在中间显示下拉菜单，这是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

好的，在阅读了大量的引导文档之后，当我单击de下拉列表和Jquery编码时，看到代码上发生了哪些变化，这就是我所做的：

因此，首先，我注意到当您单击下拉列表时，html中的这个更改：

1. a元素位于具有类dropdown的li中，它具有类show，并且aria-expanded被更改为true。
2. 带有类div (也包含类dropdown的li )具有类shown，并添加了attribute data-bs-popper = none。

因此，考虑到这一点，我创建了两个函数来获取类dropdown，并在鼠标悬停这个元素时观察，所以当鼠标进入时，我添加类和属性，当鼠标离开时，删除类和属性，如下所示：

$('.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')
  })

正如您可以看到的，我使用类dropdown并选择a和div元素，这些元素在这个li中并添加或删除类和属性，下面是简单的代码：

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