为什么我的响应式导航栏下拉菜单无法正常工作？答案

【问题标题】：Why is my responsive navbar dropdown not working properly?为什么我的响应式导航栏下拉菜单无法正常工作？
【发布时间】：2017-10-27 05:16:29
【问题描述】：

这是 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时会折叠？

【问题讨论】：

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

【解决方案1】：

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

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

请查看此修改后的Plunker 是否有效。

【讨论】：