下拉菜单未显示子列表
下拉菜单未显示子列表
提问于 2020-06-08 19:47:33
<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)。
回答 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>
看看上面的代码是否解决了您的问题。
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62270084
复制相关文章
相似问题
腾讯云开发者
