foreach循环中的Bootstrap崩溃 [英] Bootstrap collapse within a foreach loop

问题描述

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

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.

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

I am connected to a database and basically want to display the data simply and be able to expand to see more information.

我尝试了很多不同的解决方案，我目前的方法基于 https://stackoverflow.com/a/18568997 / 1366033
我应该怎么做id和href？

I've tried lots of different solutions, my current method is based off https://stackoverflow.com/a/18568997/1366033 What should I do about the id and 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>

推荐答案

基本上你是创建带循环的面板并指定相同的面板 id 到所有面板组，这就是造成这个问题的原因！所以你可以尝试如下工作，请注意 ids 在DOM中应该是唯一的

Basically you are creating panel with loop and assigning the same id to all the panel-group and that's what causing the problem here! So you can try working as below and please note ids should be unique in 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崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！