Michael Michael - 1 year ago 80
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>

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

Here is Plunker

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

But I want also collapse menu when
for this reason I use this row:

ng-click="navbarShow = false"

inside each item(Sites and Models).

But when I click on
the menu is not collapsed.

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download