避免双击以切换Bootstrap下拉列表-Java 学习之路

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

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

10 回答

73
在我的情况下，其他答案不起作用 .

在 application.js ，我有：
```
//= require popper.min
//= require bootstrap-sprockets
```
删除bootstrap-sprockets解决了这个问题 .
回复于 2024-04-24T18:32:12+08:00
1
如果有人使用带有 ui-bootstrap 模块的angular以及正常的bootstrap HTML下拉定义，则还需要两次点击 .
```
<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
   [...]
</li>
```
=>删除 data-toggle="dropdown" 将解决问题 .

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

参考：https://github.com/angular-ui/bootstrap/issues/2294
回复于 2024-04-24T18:32:12+08:00
0

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

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

回复于 2024-04-24T18:32:12+08:00
11
发生这种情况是因为其下拉菜单的Twitter Bootstrap语法包含 href 标记 . 您将需要 preventDefault 和 stopPropagation 来防止这种情况发生 . 像这样的东西可以解决这个问题：
```
$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});
```
回复于 2024-04-24T18:32:12+08:00
6

如果在项目中两次包含Bootstrap，则可能会发生这种情况 .

如果bootstrap.min.js和bootstrap.bundle.min.js（bootstrap和popper js）都包含在项目中，则表示冗余引导程序js .

js组合应该是这样的：或者：bootstrap.bundle.min.js或者：bootstrap.min.js和popper.min.js有关详细信息，请访问https://getbootstrap.com/docs/4.1/getting-started/contents/

回复于 2024-04-24T18:32:12+08:00
1

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

建议的解决方案：调整angular.ui.bootstrap dropdownToggle 指令仅限制"A"属性 . 所以通过解决这个问题你需要修改dropdownToggle restrict "CA"到"A"这将隐藏已经由bootstrap.js处理过的angular.ui.bootstrap的Class looker

对于angular.ui.bootstrap的缩小版本，请查找此行指令（"dropdownToggle"，function（）{return {restrict： "CA" ，require："?^dropdown"，link：function（a，b，c，d）{

将“CA”替换为“A” .

干杯

回复于 2024-04-24T18:32:12+08:00
3
我在https://stackoverflow.com/a/27278529/1673289遇到了与jaybro相同的问题，但他们的解决方案没有帮助 .

解决这两种情况的方法是添加：
```
data-disabled="true"
```
到具有 data-toggle="dropdown" 属性的元素上 .
回复于 2024-04-24T18:32:12+08:00
0
我发现在某些页面上我必须双击，其他页面单击 .

删除 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; });
}
```
回复于 2024-04-24T18:32:12+08:00
0

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

回复于 2024-04-24T18:32:12+08:00
2

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

回复于 2024-04-24T18:32:12+08:00

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

10 回答

相关问题