CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Michael
Michael

Reputation: 13616

Why is my 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.

Why is it collapsed when I click on Sites or Models?

Upvotes: 0

Views: 178

Answers (1)

Qianyue
Qianyue

Reputation: 1777

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.

Upvotes: 1

Related Questions