为什么我的响应式导航栏下拉不能正常工作？

Question

下面是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时崩溃了？

Answer 1

根据doc of bootstrap，来控制collapse元素，它不是collapse属性。但data-target和data-toggle属性：

您可以使用href属性的链接，或与数据目标属性按钮。在这两种情况下，都需要data-toggle =“collapse”。

请参阅此修改Plunker哪些工作。