这是HTML代码:
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navbarShow = !navbarShow">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" collapse="!navbarShow">
<ul class="nav navbar-nav">
<li><a ng-click="navbarShow = false">Sites<i class="glyphicon glyphicon-tree-conifer pull-left pull-left"></i></a></li>
<li><a ng-click="navbarShow = false">Models<i class="glyphicon glyphicon-tower pull-left"></i></a></li>
</ul>
</div>
</nav>
这是Plunker
当我点击菜单按钮时,菜单会根据navbarShow
值(true或false)弹出或折叠,并且工作正常!
但是,当Sites
或Models
点击时,我还想要折叠菜单
因此我使用这一行:
ng-click="navbarShow = false"
每个项目(网站和模型)。
但是,当我点击Sites
或Models
时,菜单未折叠。
点击Sites
或Models
后,为什么会崩溃?
答案 0 :(得分:1)
根据doc of bootstrap,为了控制崩溃元素,它不是collapse
属性。但是data-target
和data-toggle
属性:
您可以使用带有href属性的链接或带有data-target属性的按钮。在这两种情况下,都需要data-toggle =“collapse”。
请参阅此修改后的Plunker。