twitter-bootstrap 引导程序在 foreach 循环中崩溃
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30613968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap collapse within a foreach loop
提问by Louise
I am having trouble getting the collapsible panels to work within my foreach loop. When an item is clicked, all of the items expand/retract, which isn't what I want. I want each element to be independent.
我无法让可折叠面板在我的 foreach 循环中工作。单击某个项目时，所有项目都会展开/缩回，这不是我想要的。我希望每个元素都是独立的。
I am connected to a database and basically want to display the data simply and be able to expand to see more information.
我连接到一个数据库，基本上想简单地显示数据并能够扩展以查看更多信息。
I've tried lots of different solutions, my current method is based off https://stackoverflow.com/a/18568997/1366033What should I do about the id and href?
我已经尝试了很多不同的解决方案，我目前的方法是基于https://stackoverflow.com/a/18568997/1366033我应该如何处理 id 和 href？
Any help would be greatly appreciated.
任何帮助将不胜感激。
foreach (var item in groupItem){
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
@Html.DisplayFor(modelItem => item.Name)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">@Html.DisplayFor(modelItem => item.IdNumber)
</div>
</div>
</div>
</div>
回答by Guruprasad Rao
Basically you are creating panel with loop and assigning the same idto all the panel-groupand that's what causing the problem here! So you can try working as below and please note idsshould be unique in DOM
基本上你正在创建带有循环的面板并将相同的分配id给所有的panel-group，这就是导致问题的原因！所以你可以尝试如下工作，请注意ids在 DOM 中应该是唯一的
@{int i=0;}
foreach (var item in groupItem)
{
<div class="panel-group" id="accordion_@i">
<div class="panel panel-default" id="panel_@i">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne_@i" href="#collapseOne_@i">
@Html.DisplayFor(modelItem => item.Name)
</a>
</h4>
</div>
<div id="collapseOne_@i" class="panel-collapse collapse in">
<div class="panel-body">
@Html.DisplayFor(modelItem => item.IdNumber)
</div>
</div>
</div>
</div>
i++;
}
