[英]Trying to build multiple accordions with bootstrap collapse. Clicking on a second accordion collapses the first
我正在AngularJS中構建手風琴數據類型。 我的代碼可以在基本功能上發揮作用，但是我有一個大問題。
這是代碼：
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>
在我正在處理的頁面上，我需要一個手風琴，然后是其他字段，例如文本，圖像，然后是另一個手風琴。 該代碼適用於第一手風琴。 當我在頁面上再次調用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的方式。 每次生成新的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>
嘗試一下，我相信，折疊，引用等名稱存在一些問題。可以肯定的是，最好將其明確命名並分開。
多個自舉手風琴在單擊一個手風琴時崩潰，其他折疊
[英]Multiple bootstrap accordions with collapse other when clicked on one accordion
具有內部所示手風琴的自舉式手風琴，具有不同的所示bs.collapse事件
[英]bootstrap accordions with inner accordion with different shown.bs.collapse events
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.