foreach循环中的Bootstrap崩溃

Question

我无法让可折叠面板在我的foreach循环中工作.单击某个项目时,所有项目都会展开/缩进,这不是我想要的.我希望每个元素都是独立的.

我连接到数据库,基本上只想显示数据,并能够扩展以查看更多信息.

我已经尝试了很多不同的解决方案,我目前的方法基于/sf/answers/1299829821/ 我应该怎么做id和href？

任何帮助将不胜感激.

    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>

Answer 1

基本上你是创建带循环的面板并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++;
}