Angularjs 单击“切换”并关闭

作为一个普通的有棱角的新手，我花了几个小时试图找到我问题的答案。我终于放弃了，我想最好还是向更有学识的人请教，所以就这样吧

我有多个标签，应该是下拉一个容器。一开始什么都没有。单击会打开一个下拉列表，再次单击时应将其关闭。另外，单击另一个按钮时，当前打开的容器也应关闭

这是我目前的代码：

<div ng-init="item = 0">
  <div class="dropdon" ng-show="item == 1">
  </div>

    <div class="dropdon" ng-show="item == 2">
  </div>
</div>

<ul class="nav">                             
<li>
  <div class="btn"  href="#" ng-click="item = 1"
       ng-class="{ active:item == 1 }"><span>Nr1</span></div>
</li>

<li>
<div class="btn" href="#" ng-click="item = 2"
     ng-class="{ active:item == 2}"><span>Nr2</span></div>
</li>

Nr1


Nr2

目前，当你第一次点击某个东西时，它会很好地打开，并且在2个开口之间切换，但当再次点击打开的tba时，它不会关闭。我也知道所有这些逻辑都应该在控制器中，但目前我还是这方面的新手，如果有人能帮我解决这个问题，我将不胜感激。

试试这个

<div>
 <div class="dropdon" ng-show="firstitem">
 </div>

<div class="dropdon" ng-show="seconditem">
</div>
</div>

<ul class="nav">                             
 <li>
   <div class="btn"  href="#" ng-click="firstitem = !firstitem;seconditem=false"
    ng-class="{ active:item == 1 }"><span>Nr1</span></div>
 </li>

 <li>
   <div class="btn" href="#" ng-click="seconditem = !seconditem;firstitem=false"
    ng-class="{ active:item == 2}"><span>Nr2</span></div>
 </li>

Nr1


Nr2

你需要这样的

$scope.item = 0;

$scope.toggle = function(itemPos) {
   if ($scope.item === itemPos) {
       $scope.item = 0;
   }
   else {
       $scope.item = itemPos;
   }
}

和HTML格式

<div>
  <div class="dropdon" ng-show="item === 1"></div>
  <div class="dropdon" ng-show="item === 2"></div>
</div>

<ul class="nav">                             
  <li>
    <div class="btn" ng-click="toggle(1)" ng-class="{ active:item === 1 }"><span>Nr1</span></div>
  </li>

  <li>
    <div class="btn" ng-click="toggle(2)" ng-class="{ active:item === 2}"><span>Nr2</span></div>
  </li>
</ul>

Nr1


Nr2

看