angularjs – Navbar的下拉菜单被双击

发布时间：2020-12-17 08:05:48 所属栏目：安全来源：网络整理

导读：使用的版本如下。 ·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="dr

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

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

简短的答案：

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

长的答案：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!