Question

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

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

我尝试了很多不同的解决方案，我目前的方法基于https://stackoverflow.com/a/18568997/1366033 我应该怎么做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++;
}

foreach循环中的Bootstrap崩溃

1 个答案: