为什么我的响应式导航栏下拉列表无法正常工作?

时间:2016-07-07 12:40:29

标签: angularjs twitter-bootstrap angular-ui-bootstrap

这是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)弹出或折叠,并且工作正常!

但是,当SitesModels点击时,我还想要折叠菜单 因此我使用这一行:

ng-click="navbarShow = false"

每个项目(网站和模型)。

但是,当我点击SitesModels时,菜单未折叠。

点击SitesModels后,为什么会崩溃?

1 个答案:

答案 0 :(得分:1)

根据doc of bootstrap,为了控制崩溃元素,它不是collapse属性。但是data-targetdata-toggle属性:

  

您可以使用带有href属性的链接或带有data-target属性的按钮。在这两种情况下,都需要data-toggle =“collapse”。

请参阅此修改后的Plunker