Question

我正在使用Bootstrap下拉菜单。问题是它在第一次点击时永远不会下降;我需要点击2次才能切换。我想点击事件在传播之前会以某种方式卡在某处......

有没有办法解决这个问题？

Answer 1

如果某人使用带有ui-bootstrap模块的角度以及正常的引导程序HTML下拉列表定义，则还需要两次点击。

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>

=＆GT;删除data-toggle="dropdown"将解决问题。

在此之后单击打开下拉列表即可。

参考： https://github.com/angular-ui/bootstrap/issues/2294

Answer 2

在Bootstrap 4中，bootstrap.min.js和bootstrap.bundle.min.js现在在下拉列表中发生冲突。

删除bootstrap.min.js后，下拉双击问题将得到解决。

Answer 3

这是因为其下拉菜单的Twitter Bootstrap语法包含href标记。您需要preventDefault和stopPropagation来防止这种情况发生。这样的事情可以解决问题：

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});

Answer 4

如果您的项目中两次包含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/

Answer 5

就我而言，其他答案无效。

在application.js中，我有：

//= require popper.min
//= require bootstrap-sprockets

卸下引导链轮可以解决此问题。

Answer 6

如果使用bootstrap4，请删除bootstrap.bundle.min.js。我有同样的问题，并且已经解决

Answer 7

在BootStrap 4中，不应同时包含“ bootstrap.bundle.min.js”和“ bootstrap.min.js”。这将导致DropDown问题。仅保留“ bootstrap.bundle.min.js”，因为它将具有所有必需的代码。

Answer 8

通过查看angular.ui.bootstrap和native bootstrap.js的源代码，他们有两个处理程序用于下拉列表。

建议的解决方案： adjust angular.ui.bootstrap dropdownToggle 指令仅限制为“A”属性。因此，通过解决此问题，您需要修改dropdownToggle将“CA”限制为“A”，这将隐藏已经由bootstrap.js处理的angular.ui.bootstrap中的Class looker

对于angular.ui.bootstrap的缩小版本，请查找此行指令（ “dropdownToggle”，函数（）{返回{限制：的 “CA”下，要求： “^下拉”，链接：功能（A，B，C，d）{

将“CA”替换为“A”。

干杯

Answer 9

我在https://stackoverflow.com/a/27278529/1673289遇到了与jaybro相同的问题，但他们的解决方案并没有帮助。

解决这两种情况的方法是添加：

data-disabled="true"

到具有data-toggle="dropdown"属性的元素上。

Answer 10

如果您有多个bootstrap.js文件，也可能会发生这种情况！检查您是否还有旧版本，然后删除该脚本。

Answer 11

我通过删除指向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>

请注意，我下载了引导程序文件并将其存储在名为“ bootstrap”的目录中。在其中，我有三个不同的目录“ css”，“ js”，“ jquery”。

Answer 12

我发现在某些页面上我必须双击，其他页面单击。

删除data-toggle="dropdown"会使双击成为单曲并打破单曲。

我比较了dev工具中的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; });
}

Answer 13

就像@ 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版本，现在一切正常。

Answer 14

我最近遇到了同一问题，我通过编写自定义脚本解决了该问题：

Playing Harry Potter: Essays and Interviews on Fandom and ...

避免双击以切换Bootstrap下拉列表

14 个答案: