问下拉菜单未显示子列表
EN

Stack Overflow用户

提问于 2020-06-08 19:47:33

回答 2查看 34关注 0票数 0

<li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle"> Home </a>
    <ul class="dropdown-menu">
      <li routerLinkActive="active" routerLink="/application/link1">
        <i class="fa {{aplcntStatusIcon}}" ></i> Link1
      </li>
       <li routerLinkActive="active" routerLink="/application/link2">
        <i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link2
       </li>
      <li routerLinkActive="active" routerLink="/application/link-3">
         <i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link3
      </li>
    </ul>
</li>

当我尝试使用下面的代码时，它显示了带有下拉切换的“主页”，但当我试图展开它时，它不显示子项(Link1、链接2、Link3)。

html

回答 2

Stack Overflow用户

发布于 2020-06-08 19:59:31

您还没有给出完整的代码，所以我假设您使用的是Bootstrap 4，所以我写了这个答案

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>

  <li class="dropdown">
    <button data-toggle="dropdown" class="dropdown-toggle"> Home </button>
    <ul class="dropdown-menu">
      <li routerLinkActive="active" routerLink="/application/link1">
        <a href="#"><i class="fa {{aplcntStatusIcon}}" ></i> Link1</a>
      </li>
      <li routerLinkActive="active" routerLink="/application/link2">
        <a href="#"><i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link2</a>
      </li>
      <li routerLinkActive="active" routerLink="/application/link-3">
        <a href="#"> <i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link3</a>
      </li>
    </ul>
  </li>
</body>

</html>

看看上面的代码是否解决了您的问题。

票数 0

Stack Overflow用户

发布于 2020-06-08 20:14:52

我假设您使用的是Bootstrap 4.x、脚本弹出程序或bootstrap包。

下拉菜单构建在第三方库Popper.js上，该库提供动态定位和视口检测。确保在Bootstrap的JavaScript之前包含popper.min.js，或者使用包含Popper.js的bootstrap.bundle.min.js / bootstrap.bundle.js。Popper.js不用于定位导航栏中的下拉列表，因为动态定位不是必需的。

https://getbootstrap.com/docs/4.5/getting-started/download/

只需将此添加到您的head标签

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>