如何修复点击时不显示的下拉菜单？ [复制]

Question

我正在使用 HTML 创建一个静态网站，但 CSS 框架是通过免费的主题构建器为我构建的。现在是我成功实施框架的时候了。我使用Bootstrap Builder 和他们的文档来形成我的CSS，并从那里添加我需要的其他内容。我正在尝试在我的导航栏中添加一个下拉列表，但由于某种原因，他们给我的示例不起作用，但他们的演示/示例可以。我已经逐行复制了他们的代码，并且无法使示例正常工作。我在下面分享的示例代码是一个按钮下拉菜单，唯一的区别是使用 btn 类，但其他代码与导航栏下拉菜单完全相同。

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#dropdownMenuLink" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

我希望当我单击下拉列表时，列出的项目将显示在...好吧...下拉列表中。

预期结果： Untoggled/Not Clicked 和 Toggled/Clicked，周围没有明显的绿色方块。

Answer 1

Twitter 引导程序使用 javascript 来处理少数组件。对于下拉菜单，它使用 popper.js，所以如果你想让下拉菜单工作，你需要添加 popperjs 脚本。它记录在这里。

https://getbootstrap.com/docs/4.0/getting-started/introduction/#js

此链接中还列出了所有依赖于 JS 的组件。

Answer 2

首先请检查您的CDN订单是否正确添加了CDNS

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria- 
expanded="false">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

如果一切正常，只需从

中删除链接引用

<a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria- 
expanded="false">Dropdown link</a>

它会正常工作。希望它可以帮助你