0
私はアングルで簡単なアコーディオンを作りようとしています。私はこれを思いついた - それは動作しますが、ロジックは超醜いです。これをコード化する良い方法はありますか？アコーディオンとアングル
クラスがng-classで適用されると、アコーディオンが開きます。難しいのは、一度に1つのパネルしか開いていないことを確認することです。この投稿を読んでくれてありがとう！
var myApp = angular.module('myApp', []);
myApp.controller('FooterController', ['$scope',
function($scope) {
return $scope.toggleFooterNav = function(target) {
$scope.Panel1 = $scope.Panel2 = $scope.Panel3 = $scope.Panel4 = false;
switch (target) {
case 'Panel1':
return $scope.Panel1 = !$scope.Panel1;
case 'Panel2':
return $scope.Panel2 = !$scope.Panel2;
case 'Panel3':
return $scope.Panel3 = !$scope.Panel3;
case 'Panel4':
return $scope.Panel4 = !$scope.Panel4;
}
};
}
]);.footerNavPanel {
display: none;
}
.footerNavPanelActive {
display: block !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="columns" ng-controller="FooterController">
<h6><a href="#" ng-click="toggleFooterNav('Panel1')">Panel1</a></h6>
<ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel1}">
<li><a>Test</a>
</li>
</ul>
<h6><a href="#" ng-click="toggleFooterNav('Panel2')">Panel2</a></h6>
<ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel2}">
<li><a>Test</a>
</li>
</ul>
<h6><a href="#" ng-click="toggleFooterNav('Panel3')">Panel3</a></h6>
<ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel3}">
<li><a>Test</a>
</li>
</ul>
<h6><a href="#" ng-click="toggleFooterNav('Panel4')">Panel4</a></h6>
<ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel4}">
<li><a>Test</a>
</li>
</ul>
</div>
</div>