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

Question

我正在使用Bootstrap下拉菜单.问题是它在第一次点击时永远不会下降; 我需要点击2次才能切换.我想点击事件在某种程度上被卡住了之前传播下来...

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

Answer 1

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

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

=>删除data-toggle="dropdown"将解决问题.

只需单击一下即可打开下拉列表.

完美的工作,谢谢你的抬头! (2认同)
那个人是赢家! (2认同)
这已在 UI-Bootstrap 0.12 中修复。对于升级到 0.12 后遇到此问题的任何人，只需重新添加您之前删除的 `data-toggle="dropdown"`。 (2认同)

Answer 2

在引导4,bootstrap.min.js和bootstrap.bundle.min.js现在在下拉冲突.

通过删除bootstrap.min.js,下拉双击问题将得到解决.

Answer 3

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

Answer 4

发生这种情况是因为其下拉列表的Twitter Bootstrap语法包含一个href标记.您将需要preventDefault并stopPropagation防止这种情况发生.像这样的东西可以解决这个问题:

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

    return false;
});

Answer 5

就像 @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 6

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