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函数仅更改新作业的状态，而不是当前打开的作业。

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

var current =null;

在您的Init中，初始化当前。

current = job;

在你的toggleActive中首先更改当前状态，然后将其设置为新作业。

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

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

1 个答案: