我需要一些我正在为我的项目工作的模板的小帮助。我在网上找到了一个手风琴容器的代码:
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: 1px solid lightgray;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
opacity: 1;
max-height: 500px;
}
button.accordion:after {
content: "+"; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "-"; /* Unicode character for "minus" sign (-) */
}
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
它工作良好,看起来很好,正是我想要的。但是当我尝试这样做的时候:
<div ng-repeat="category in categories">
<button class="accordion">{{category.name}}</button>
<div class="panel">
<p>{{category.description}}</p>
</div>
</div>
标签不再打开。我找不到问题所在。有人能给我一个解决办法吗?谢谢你。
这里有一种不同的方法:
- 将
ng-click
添加到按钮中,以切换他的active
类。 - 将
.show
选择器更改为button.active + div.panel
,以便您只能更改按钮类。
angular.module('app', []).controller('ctrl', function($scope) {
$scope.categories = [];
for (var i = 1; i <= 3; i++) {
$scope.categories.push({
name: 'cat' + i,
description: 'description' + i
});
}
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
button.active + div.panel {
opacity: 1;
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>Animated Accordion</h2>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="category in categories">
<button class="accordion" data-ng-click="category.active = !category.active" data-ng-class="{'active': category.active}">{{category.name}}</button>
<div class="panel">
<p>{{category.description}}</p>
</div>
</div>
</div>
var app = angular.module('app',[]);
app.controller('mycontroller',function($scope){
$scope.categories = [{name:'Lorem ipsum...'},{name:'Lorem ipsum...'},{name:'Lorem ipsum...'}]
});
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
</head>
<body ng-controller='mycontroller'>
<div ng-repeat="category in categories">
<button ng-class="accordion">{{category.name}}</button>
<div ng-class="panel">
<p>{{category.description}}</p>
</div>
</div></body>
</html>