Question

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

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

它将正常工作。希望它对您有帮助

如何修复点击时不显示下拉菜单？

2 个答案: