javascript - Bootstrap 在 foreach 循环中崩溃

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++;
}