关闭angularjs中的其他手风琴元素答案

【问题标题】：Close other accordion elements in angularjs关闭angularjs中的其他手风琴元素
【发布时间】：2015-04-27 09:21:57
【问题描述】：

我已经实现了自己的手风琴元素，所以我没有使用 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";
                    }
            }
});

【问题讨论】：

标签： html angularjs accordion

【解决方案1】：

您只需要在更改单击的新作业的状态之前跟踪当前作业并更改其状态即可。你的 toggleActive 函数只是改变新 Job 的状态，而不是当前打开的 Job。

在您的 JobsCtrl 中，跟踪当前的作业。

var current =null;

在你的 Init 中，初始化 current。

current = job;

在你的 toggleActive 首先改变当前的状态，然后将它设置为新的工作。

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

【讨论】：