我正在使用 Bootstrap 下拉菜单。问题是它在第一次点击时永远不会掉下来。我需要点击 2 次才能切换。我猜点击事件在向下传播之前会以某种方式卡在某个地方......
有什么办法可以解决吗？
【问题讨论】：
标签： javascript css angularjs twitter-bootstrap angular-ui-bootstrap
如果使用 bootstrap4，请删除 bootstrap.bundle.min.js。 我遇到了同样的问题，已经解决了
【讨论】：
我最近遇到了同样的问题，我通过编写自定义脚本解决了它：
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
【讨论】：
我通过删除指向 bootstrap.bundle.js 的链接并添加指向 popper.js 的链接解决了这个问题
之前
<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
之后
<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
请注意，我下载了引导文件并将它们存储在名为“引导程序”的目录中。在里面我有三个不同的目录'css'，'js'，'jquery'。
【讨论】：
就像@rajaneesh-singh 告诉我们的那样，当 Bootstrap 被包含两次时，就会出现这个错误。
就我而言，我在官方引导程序和 Twitter 版本中有一个副本：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
我刚刚删除了 twitter 版本，现在一切正常。
【讨论】：
在 BootStrap 4 中，不应同时包含“bootstrap.bundle.min.js”和“bootstrap.min.js”。这将导致 DropDown 问题。只保留“bootstrap.bundle.min.js”，因为它将包含所有必需的代码。
【讨论】：
如果您有多个 bootstrap.js 文件，也可能会发生这种情况！检查您是否还有旧版本并删除该脚本。
【讨论】：
如果您的项目中包含两次 Bootstrap，则可能会发生这种情况。
如果bootstrap.min.js和bootstrap.bundle.min.js(bootstrap和popper js)都包含在项目中，则表示多余的bootstrap js。
js组合应该是这样的： 要么：仅 bootstrap.bundle.min.js 或者：bootstrap.min.js 和 popper.min.js 详情请访问https://getbootstrap.com/docs/4.1/getting-started/contents/
【讨论】：
就我而言，其他答案不起作用。
在application.js，我有：
//= require popper.min
//= require bootstrap-sprockets
删除引导链轮解决了这个问题。
【讨论】：
在 Bootstrap 4 中，bootstrap.min.js 和 bootstrap.bundle.min.js 现在在下拉列表中发生冲突。
通过删除bootstrap.min.js，下拉双击问题将得到解决。
【讨论】：
我在https://stackoverflow.com/a/27278529/1673289 中遇到了与 jaybro 相同的问题，但他们的解决方案没有帮助。
解决这两种情况的方法是添加：
data-disabled="true"
到具有data-toggle="dropdown" 属性的元素上。
【讨论】：
我发现在某些页面上我必须双击，而其他页面是单击。
删除data-toggle="dropdown" 使双击变为单点并破坏单点。
我比较了开发工具中的 html（因为提供的是相同的 html），并在我的双击页面上发现带有数据切换的 div 看起来像这样：
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
但是单击 html 是这样的：
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">
所以，在准备好的文档中，我使用了 attr 检测和阻止默认答案，它使我的双击打开变成了单击打开：
if (!($('#notifications').attr('aria-haspopup') == undefined &&
$('#notifications').attr('aria-expanded') == undefined))
{
$('.dropdown-toggle').click(function (e) { return false; });
}
【讨论】：
通过查看 angular.ui.bootstrap 和本机 bootstrap.js 的源代码，它们都有用于下拉菜单的处理程序。
建议的解决方案： 调整 angular.ui.bootstrap dropdownToggle 指令仅限于“A”属性。 因此，通过解决此问题，您需要将 dropdownToggle 限制“CA”修改为“A”，这将隐藏已由 bootstrap.js 处理的 angular.ui.bootstrap 中的类查找器
对于 angular.ui.bootstrap 的缩小版本，请查找此行 指令("dropdownToggle",function(){return{restrict:"CA",require:"?^dropdown",link:function(a,b,c,d){
将“CA”替换为“A”。
干杯
【讨论】：
如果有人将 Angular 与 ui-bootstrap 模块一起使用以及正常的引导 HTML 下拉定义，则还需要单击两次。
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
[...]
</li>
=> 删除 data-toggle="dropdown" 将解决此问题。
在此之后可以一键打开下拉菜单。
发生这种情况是因为其下拉菜单的 Twitter Bootstrap 语法包含 href 标签。您需要preventDefault 和stopPropagation 来防止这种情况发生。像这样的东西可以解决问题：
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
【讨论】：