Bootstrap + Angular动态菜单在展开后不折叠
Posted
技术标签:
【中文标题】Bootstrap + Angular动态菜单在展开后不折叠【英文标题】：Bootstrap + Angular dynamic menu not collapsing after uncollapse 【发布时间】：2017-05-25 16:37:27 【问题描述】：我有以下代码，我试图显示一个可折叠的菜单，我用 AngularJS 调用了哪些项目：
<div class="btn-group" role="group">
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#SearchMenu" aria-expanded="false">
<i class="glyphicon glyphicon-th-list"></i>
<i class="glyphicon glyphicon-chevron-down"></i>
Search Menu
</button>
</div>
<div class="collapse navbar-collapse" id="SearchMenu">
<div class="row">
<div class="col-md-10">
<ul class="nav navbar-nav">
<li class="dropdown" ng-repeat="menuDetail in menu.data" >
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">menuDetail.item.displayName<span ng-if="menuDetail.submenu" class="caret"></span></a>
<ul class="dropdown-menu" ng-if="menuDetail.submenu">
<li ng-repeat="submenu in menuDetail.submenu"><a href="">submenu.displayName</a></li>
</ul>
</li>
<li>
<a href="" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Configurations">
<span class="glyphicon glyphicon-cog"></span><span class="hidden-md hidden-sm"> Config</span>
</a>
</li>
<li>
<a href="" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Help">
<span class="glyphicon glyphicon-question-sign"></span><span class="hidden-md hidden-sm"> Help</span>
</a>
</li>
<li>
<a href="#/" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Logout">
<span class="glyphicon glyphicon-log-out"></span><span class="hidden-md hidden-sm"> Logout</span>
</a>
</li>
</ul>
</div>
</div>
</div>
在无法连接到服务器以检索菜单项的情况下运行时，它可以正常工作（即使没有大多数选项也可以正确显示和隐藏）。但是在服务器上运行它并在chrome和IE中使用F12进行调试时，显示菜单后，无法再次折叠。
当我再次单击按钮以隐藏菜单时，Chrome 开发者工具指示它发生了变化（见第一张图片），但片刻之后，它又回到了原来的状态（见第二张图片），所以我没有能够再次隐藏菜单。
The moment when a click is made to the button to hide the menu
After an instant goes back automatically
有什么想法或建议吗？
谢谢！
【问题讨论】：
【参考方案1】：我认为您在加载依赖项时遇到了一些问题，因为您提供给我们的代码运行良好。你可以看看这个CodePen
如果您要将简单的 Bootstrap 与 Angular 混合使用，则必须按顺序加载它们，如下所示：
-
引导 css
jQuery js
引导 js
Angular js
<head> ... <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"> ... </head>
【讨论】：
【参考方案2】：解决了。 原来我有一个完整的 html（带有 html 和 body 标签）插入到一个视图中。我应该只从 div 部分插入我的 html。 奇怪的是，在 Chrome 中运行良好，但 iE 无法处理。
谢谢
【讨论】：
以上是关于Bootstrap + Angular动态菜单在展开后不折叠的主要内容，如果未能解决你的问题，请参考以下文章
Angular 和 Bootstrap：Offcanvas 推送菜单模板
mouseenter 上的 angular-bootstrap 下拉菜单，并在单击之前保持下拉菜单隐藏。
如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单
ngx-bootstrap 下拉菜单未在 Angular 5 项目中打开