我正在致力于在 AngularJS 中构建 Accordion 数据类型。我的代码可以运行基本功能，但我有一个大问题。
这是代码:
var app = angular.module('accordions', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldAccordions = [{
fieldAccordionHeader: 'Header 1',
fieldAccordionItems: [{
desc: 'Item 1 - A'
}, {
desc: 'Item 1 - B'
}]
}, {
fieldAccordionHeader: 'Header 2',
fieldAccordionItems: [{
desc: 'Item 2'
}]
}, {
fieldAccordionHeader: 'Header 3',
fieldAccordionItems: [{
desc: 'Item 3'
}]
}];
});<!DOCTYPE html>
<html ng-app="accordions">
<head>
<meta charset="utf-8" />
<title>AngularJS Accordions</title>
<link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="field in fieldAccordions track by $index">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $index }}">
{{ field.fieldAccordionHeader }} </a>
</div>
</div>
<div id="collapse{{ $index }}" class="panel-collapse collapse in">
<div class="panel-body">
<div ng-repeat="item in field.fieldAccordionItems track by $index">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
</body>
</html>在我正在处理的页面上，我需要一个 Accordion ，后面是其他字段，例如文本、图像，然后是另一个 Accordion 。该代码适用于第一个 Accordion 。当我在页面上再次调用 fieldAccordions 时，打开其标题将打开初始 fieldAccordions 元素中的标题。
这就是我的界面的样子:
First fieldAccordions on the page: (I'll just call it fieldAccordions1)
Header 1 for fieldAccordions1 // opens Header 1 for fieldAccordions1
Header 2 for fieldAccordions1 // opens Header 2 for fieldAccordions1
Header 3 for fieldAccordions1 // opens Header 3 for fieldAccordions1
//Text
//Images
Second fieldAccordions on the page: (I'll just call it fieldAccordions2)
Header 1 for fieldAccordions2 // opens Header 1 for fieldAccordions1
Header 2 for fieldAccordions2 // opens Header 2 for fieldAccordions1
Header 3 for fieldAccordions2 // opens Header 3 for fieldAccordions1
Header 4 for fieldAccordions2 // opens Header 4 for fieldAccordions2
// header 4 opens for fieldAccordions2 since fieldAccordions1 does not have a 4th child
有人可以帮我解决这个问题吗？我认为问题在于我使用 $index.html 的方式。每次生成新的 fieldAccordion 时，我都需要有一个唯一的 id，但我陷入了困境。
最佳答案
var app = angular.module('accordions', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldAccordions = [{
fieldAccordionHeader: 'Header 1',
collapseToggle: 'one',
fieldAccordionItems: [{
desc: 'Item 1 - A'
}, {
desc: 'Item 1 - B'
}]
}, {
fieldAccordionHeader: 'Header 2',
collapseToggle: 'two',
fieldAccordionItems: [{
desc: 'Item 2'
}]
}, {
fieldAccordionHeader: 'Header 3',
collapseToggle: 'three',
fieldAccordionItems: [{
desc: 'Item 3'
}]
}];
});<!DOCTYPE html>
<html ng-app="accordions">
<head>
<meta charset="utf-8" />
<title>AngularJS Accordions</title>
<link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="field in fieldAccordions track by $index">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" href="#{{field.collapseToggle}}">
{{ field.fieldAccordionHeader }} </a>
</div>
</div>
<div id="{{field.collapseToggle}}" class="panel-collapse collapse in">
<div class="panel-body">
<div ng-repeat="item in field.fieldAccordionItems track by $index">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
</body>
</html>尝试一下，我相信，折叠、引用等名称存在一些问题。为了确保最好将其清晰命名和分隔。
关于javascript - 尝试构建多个带有引导崩溃的 Accordion 。单击第二个 Accordion 会折叠第一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46922309/