【发布时间】:2019-05-10 10:56:30
【问题描述】:
Bootstrap 下拉菜单在与数据目标一起使用时不会切换。
如果我从按钮中删除data-target,那么它可以工作,但我的网站下拉菜单在第二次点击时打开,所以我搜索了使用data-target 的解决方案,但在使用它之后它没有切换。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-target="#dropdownnotifyButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div id="dropdownnotifyButton" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
我在导航栏中使用了两个下拉菜单,但都遇到了同样的问题。
有什么办法吗?
【问题讨论】:
-
它在没有数据目标的情况下完美运行。 jsfiddle.net/suhailsulu/btykfj8s
-
检查您的代码是否添加了任何库 2 次或更多次,例如 bootstrap jquery 或 popper
-
@suhailc,在我的导航栏中使用它时没有
data-target下拉菜单通过第二次点击打开,所以我在这里得到解决方案 - stackoverflow.com/questions/50494625/… -
我有 - jquery.min.js, popper.min.js, bootstrap.min.js 以各自的顺序
-
我也检查了您在本地提供的代码。它工作正常,你说你有 2 个下拉菜单,所以在你的代码中你可以评论一个下拉菜单并检查。
标签: javascript html css twitter-bootstrap bootstrap-4