双击导航栏的下拉菜单。

Posted 2023-03-06

【中文标题】双击导航栏的下拉菜单。

【英文标题】：dropdown of Navbar is double-clicked.

【发布时间】：2014-07-29 01:15:21

【问题描述】：

使用的版本如下。 ・AngularJS 1.2.16 ・Bootstrap3.1.1 ・AngularUI Bootstratp 0.11.0

var myApp = angular.module('app', ['ngRoute', 'ui.bootstrap']);

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">menu</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="userMenu">
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">one</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">two</a></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#" class="">three</a></li>
  </ul>
</li>

如果执行，导航栏的Dropdown需要点击两次。 （除非双击菜单，否则一二三不显示。）

然后，当降低要使用的脚本版本时，它能够令人满意地使用。 ・3.1.0 bootstrap.min.js ・0.10.0 ui-bootstrap-tpls.min.js

我想让你教如果它执行，它可以一键显示。

【参考方案1】：

简短的回答：

您不应该将 bootstrap.js 与 angular-ui-bootstrap.js 库一起使用。两个库都在努力显示/隐藏点击事件的下拉菜单。

长答案：

下拉菜单类将显示属性设置为无。 boostrap.js 库将单击事件附加到具有 data-toggle="dropdown" 属性的元素。 click 事件然后检查父元素是否有一个开放的类。如果开放类存在，则将其删除，否则添加开放类。 'open' 类将 css 显示属性设置为阻止具有下拉菜单类的子元素，从而覆盖原始值 none。

angular-ui-bootstrap.js 库也以相同的方式在切换点击事件上添加/删除打开类。于是一个库添加了 open 类，另一个库立即将其删除，从而导致下拉菜单类中原来的 css 显示属性为 none。

【讨论】：

就是如果你使用了angular-ui-bootstrap.js，那就不要使用bootstrap.js。谢谢你的回答。

太棒了！这让我发疯了。

你不知道我在尝试解决这个问题上浪费了多少时间。谢谢！

阅读 Rob J 的回答后，我从 html 中删除了 , data-toggle = dropdown ，认为它不会执行下拉菜单的引导部分，并允许 ui.bootstrap 单独工作 - 它有效！这是一个好习惯吗？顺便说一句，谢谢你的回答！

@JRulz 这可能会解决下拉问题，但是使用这两个库也会在其他指令（日期选择器）中引入问题，不推荐。