使用的版本如下。
・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>
如果执行,则需要单击导航栏下拉菜单两次。 (除非双击菜单,否则一、二、三不会显示。)
然后,当降低所使用的脚本版本时,就能够正常使用了。
・3.1.0 bootstrap.min.js
・0.10.0 ui-bootstrap-tpls.min.js
我要教教怎么执行,一键就能显示。
最佳答案
简短的回答:
您不应该将 bootstrap.js 与 angular-ui-bootstrap.js 库一起使用。这两个库都致力于在点击事件上显示/隐藏下拉列表。
长答案:
下拉菜单类将显示属性设置为无。 boostrap.js 库将单击事件附加到具有 data-toggle="dropdown"属性的元素。然后,单击事件检查父元素是否具有开放类。如果开放类存在,则删除它,否则添加开放类。 “open”类将 css 显示属性设置为阻止具有 dropdown-menu 类的子元素,从而覆盖原始值 none。
Angular-ui-bootstrap.js 库还以相同的方式添加/删除切换单击事件上的开放类。因此,一个库添加了开放类,另一个库立即将其删除,从而导致下拉菜单类中原始 css 显示属性为 none。
关于angularjs - 双击导航栏的下拉菜单。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24104336/