如何关闭角度js中的其他手风琴

时间:2015-07-03 10:06:34

标签: angularjs

在下面的代码中,我使用的是正常工作的切换功能,但我想在其中一个打开时关闭其他功能

 <div class="listing_cat" ng-controller="categoryCtrl">                
             <ul>
              <li class="mob_main_cat" ng-repeat="x in categories" ng-click="toggleCustom($index, $event)" >
                 <span class="cat_left"> {{x.category}}</span>  <span class="cat_right"><i class="fa fa-plus"></i></span>
                 <div class="clearfix"></div>  
                 <ul class="mob_sub_cat" ng-show="custom[$index]">
                   <li class="head">View all in Education</li>
                   <li ng-repeat="x in subcategories"><a href="#">{{x.subcategory}}</a></li>

                 </ul>               
               </li>               

             </ul>
            </div>

<script>
$scope.custom = [];     
    $scope.toggleCustom = function(obj,event) { 
      event.stopPropagation(); 
            $scope.custom[obj] = !$scope.custom[obj];                       
        };
</script>

http://jsfiddle.net/U3pVM/16884/

上面是我的jsfiddle链接,我想在点击任何一个时关闭另一个链接

1 个答案:

答案 0 :(得分:1)

使用解决方案更新了您的小提琴:

d

控制器:

$scope.toggleCustom = function (obj, event) {
    event.stopPropagation();
    var temp = $scope.categories[obj].shown
    for (var i=0; i < $scope.categories.length; i++) {
        $scope.categories[i].shown = false;
    }
    $scope.categories[obj].shown = !temp;
};

HTML:

<ul class="mob_sub_cat" ng-show="categories[$index].shown">

应该足够简单:)