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

Question

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

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>

它运行良好。当我点击所有子菜单时，它们都会显示出来，但当我想打开一个新菜单时，如何隐藏已经展开的子菜单？这是小提琴

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