Question

使用的版本如下 ·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>

如果执行，则需要点击两次下拉Navbar。（除非双击菜单，否则不会显示一个，两个和三个。）

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

我希望你教它如何执行，只需点击一下即可显示。

Answer 1

答案简短：

你不应该在angular-ui-bootstrap.js库中使用bootstrap.js。两个库都在显示/隐藏点击事件的下拉列表。

答案很长：

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

angular-ui-bootstrap.js库也以相同的方式在切换点击事件中添加/删除open类。因此，一个库添加了open类，另一个库会立即删除它，从而导致下拉菜单类中的原始css display属性为none。

双击导航栏的下拉列表。

1 个答案: