选择另一个时隐藏展开的子菜单答案

【问题标题】：Hide expanded sub menu when another one selected选择另一个时隐藏展开的子菜单
【发布时间】：2019-05-12 17:16:30
【问题描述】：

当用户点击带有动画的子菜单时，我想展开子菜单：

angular.module('testApp', ['ngAnimate'])
  .controller('testController', ['$scope',
    function($scope) {
      $scope.workshops = [
        { name: "Workshop audience", id: 'audience' },
        { name: "Workshop catalog", id: 'catalog' },
        { name: "Add a workshop", id: 'add_wk' },
        { name: "Add/Edit categories", id: 'add_ctg' },
        { name: "Add/Edit difficulty level", id: 'add_lvl' },
        { name: "Add/Edit a target group", id: 'add_grp' }
      ];
    }
  ])

  .animation('.slide', function() {
    var NG_HIDE_CLASS = 'ng-hide';
    return {
      beforeAddClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.slideUp(done);
        }
      },
      removeClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.hide().slideDown(done);
        }
      }
    }
  });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>


<div ng-app="testApp" ng-controller="testController">
  <ul>
    <li class="nav-item" ng-class="{ active: isActive('/analysis/recommendation') }">
      <a class="nav-link" ng-click="expand = !expand;">Analysis</a>
      <ul class="slide" ng-show="expand">
        <li>
          <a ng-class="{active:isActive('/analysis/recommendation')}" href="#!analysis/recommendation">Recommendation</a>
        </li>
      </ul>
    </li>
    <li ng-class="{ active: isActive('/workshop/') }">
      <a ng-click="expand2 = !expand2">Workshop </a>
      <ul class="nav flex-column sub-menu slide" ng-show="expand2">
        <li data-ng-repeat="workshop in workshops">
          <a href="#!workshop/{{workshop.id}}" ng-class="{active:isActive('/workshop/'+workshop.id)}" ng-bind="workshop.name"></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

它工作正常。当我点击它们时会显示所有子菜单，但是当我想打开一个新的子菜单时，如何隐藏已经展开的子菜单？这里是fiddle

【问题讨论】：

标签： javascript angularjs submenu

【解决方案1】：

这行得通吗？

angular.module('testApp', ['ngAnimate'])
  .controller('testController', ['$scope',
    function($scope) {
      $scope.workshops = [
        { name: "Workshop audience", id: 'audience' },
        { name: "Workshop catalog", id: 'catalog' },
        { name: "Add a workshop", id: 'add_wk' },
        { name: "Add/Edit categories", id: 'add_ctg' },
        { name: "Add/Edit difficulty level", id: 'add_lvl' },
        { name: "Add/Edit a target group", id: 'add_grp' }
      ];
      
      $scope.expandToggle= function(subMenu){
      	if (subMenu == 'expand'){
          $scope.expand = !$scope.expand;
          if($scope.expand2){$scope.expand2 = false;} 
        }
        if (subMenu == 'expand2'){
          $scope.expand2 = !$scope.expand2;
          if($scope.expand){$scope.expand = false;} 
        }
      }
      
    }
  ])

  .animation('.slide', function() {
    var NG_HIDE_CLASS = 'ng-hide';
    return {
      beforeAddClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.slideUp(done);
        }
      },
      removeClass: function(element, className, done) {
        if (className === NG_HIDE_CLASS) {
          element.hide().slideDown(done);
        }
      }
    }
  });

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>


<div ng-app="testApp" ng-controller="testController">
  <ul>
    <li class="nav-item" ng-class="{ active: isActive('/analysis/recommendation') }">
      <a class="nav-link" ng-click="expandToggle('expand')">Analysis</a>
      <ul class="slide" ng-show="expand">
        <li>
          <a ng-class="{active:isActive('/analysis/recommendation')}" href="#!analysis/recommendation">Recommendation</a>
        </li>
      </ul>
    </li>
    <li ng-class="{ active: isActive('/workshop/') }">
      <a ng-click="expandToggle('expand2')">Workshop </a>
      <ul class="nav flex-column sub-menu slide" ng-show="expand2">
        <li data-ng-repeat="workshop in workshops">
          <a href="#!workshop/{{workshop.id}}" ng-class="{active:isActive('/workshop/'+workshop.id)}" ng-bind="workshop.name"></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：