Почему мое отзывчивое раскрывающееся меню навигации не работает должным образом?

Question

Вот 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 значение (истина или ложь), и это работает отлично!

Но я хочу также свернуть меню при Sites или Models щелкнул по этой причине я использую эту строку:

ng-click="navbarShow = false" 

внутри каждого элемента (Sites и модели).

Но когда я нажимаю на Sites или Models, меню не рушится.

Почему он рухнул, когда я нажимаю на Sites или Models?

Answer 1

Согласно doc of bootstrap, для управления элементом обрушения это не атрибут collapse. Но data-target и data-toggle атрибуты:

Вы можете использовать ссылку с атрибутом HREF, или кнопку с данными целевого атрибута. В обоих случаях требуется переключение данных = «свернуть».

См. Это измененное Plunker, которое работает.