Michael Michael - 5 months ago 13
AngularJS Question

Why responsive navbar dropdown not working properly?

Please help me to figure out why responsive navbar dropdown not working properly.

Here is HTML code:

<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>


Here is Plunker

When I click on the menu button the menu is popup or collapsed according to
navbarShow
value(true or false) and it's works fine!

But I want also collapse menu when
Sites
or
Models
clicked
for this reason I use this row:

ng-click="navbarShow = false"


inside each item(Sites and Models).

But when I click on
Sites
or
Models
the menu is not collapsed.

Please help me to figure out why it's collapsed when I click on Sites
or
Models`.

Answer

According to doc of bootstrap, to controle the collapse element, it's not collapse attribute. But the data-target and the data-toggle attributes:

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.

Please see this modifyed Plunker which works.