bootstrap 下拉列表中的链接不起作用

Question

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="bags" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        More <i class="fas fa-angle-down ml-3"></i></a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown3">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

这是下拉菜单的代码

.dropdown-toggle::after {
    display: none;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}

这是 css 用于在悬停时显示下拉菜单

点击 link 没有导航到页面... 我正在使用 express 作为后端 n 在导航栏中输入 link 但没有单击 link..

我尝试添加数据目标，但似乎也没有用.. 我想将指针事件设置为自动，但 tat 也认为不起作用..

Answer 1

尝试使用 data-hover="dropdown" aria-haspopup="true" aria-expanded="false"

<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link  dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="services.html">SERVICES</a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown3">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

Answer 2

这个 link 可能会有帮助。

Bootstrap Dropdown Hover

Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.

重点是添加data-hover="dropdown"

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
   Dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown">
      <a href="#">One more dropdown</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li class="dropdown">
          <a href="#">One more dropdown</a>
          <ul class="dropdown-menu">
          ...
          </ul>
        </li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
       </ul>
    </li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

bootstrap 下拉列表中的链接不起作用

linking on bootstrap dropdown not working

routing

node.js

express

twitter-bootstrap

bootstrap-4