關閉angularjs中的其他手風琴元素

Question

我已經實現了我自己的手風琴元素，所以我沒有使用ui-bootstrap。

我想關閉其他手風琴，當我點擊另一個。

我目前有一個初始化函數，我聲明所有手風琴都已關閉。當你點擊其中一個手風琴時，它將激活toggleActive功能，切換點擊的手風琴。如果您點擊時另一個手風琴仍然打開，它應該關閉。只能開一個手風琴。

HTML

  <div class="job-item" ng-repeat="job in jobs"> 
       <div ng-init="init(job)" ng-click="toggleActive(job)" ng-class="{'job-heading-collapsed': job.active, 'job-heading-expanded': !job.active}"> 
        <h3>{{ job.title }}</h3> 
        <span ng-class="'fa fa-chevron-' + job.direction"></span> 
       </div> 

       <div class="slideDown" ng-hide="job.active"> 
        <div class="expand-collapse-content"> 
         <p>{{ job.description }}</p> 
        </div> 
       </div> 
      </div> 

控制器

var app = angular.module('myApp') 
.controller('JobsCtrl', function($scope, jobsService){ 
    var jobs = jobsService.getJobs(); 

    jobs.then(function (data) { 
     $scope.jobs = data.data; 
    }); 

      $scope.init = function(job) { 
        job.active = true; 
        job.direction = "down"; 
      } 

      $scope.toggleActive = function(job) { 
        job.active = !job.active; 

        if(job.active) { 
          job.direction = "down"; 
        } else { 
          job.direction = "up"; 
        } 
      } 
}); 

Answer 1

你只需要跟蹤當前工作的和不斷變化的新的工作狀態之前點擊改變其狀態。您的toggleActive功能僅更改新Job的狀態，而不是當前打開的作業。

在您的JobsCtrl中，保持跟蹤哪項工作是最新的。

var current =null; 

在您的初始化，初始化當前。

current = job; 

在您的toggleActive中，首先更改當前狀態，然後將其設置爲新作業。

current.Active = !current.Active; 
current = job;