Bootstrap 在 foreach 循环中崩溃答案

【问题标题】：Bootstrap collapse with in a foreach loopBootstrap 在 foreach 循环中崩溃
【发布时间】：2020-03-27 09:13:22
【问题描述】：

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

我已连接到数据库，主要是希望简单地显示数据并能够展开以查看更多信息。

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

任何帮助将不胜感激。

@foreach (var item in Model)
            {
                <tr class="grid-row" id="accordion">
                    <td class="grid-cell" data-name="Name">@item.Name</td>
                    <td class="grid-cell" data-name="TodayDate">@item.TodayDate.Value.ToString("dd/MM/yyyy")</td>
                    <td class="grid-cell" data-name="Count">@item.Count</td>
                    <td class="grid-cell" data-name="TotalCount">@item.TotalCount</td>
                    <td>
                        <div class="accordion">
                            @{int i = 0;}
                            <div class="heading" id="heading_@i">
                                <h4 class="title">
                                    <a class="collapsed" role="button" data-toggle="collapse" href="#collapse_@i" aria-expanded="true" data-parent="#accordion" aria-controls="collapse_@i">
                                        <i id="aElement" data-id="@item.Id" class="chevron fa fa-fw"></i>
                                    </a>
                                </h4>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="grid-row">
                    <td class="grid-cell" data-name="">
                        <div id="collapse_@i" class="collapse" aria-labelledby="heading_@i" data-parent="#accordion">
                            @{i++;}
                            <div>
                                <div id="divprogress"></div>
                                <div id="chartdiv" style="width: 800px; height: auto; position:relative;"></div>
                            </div>

                        </div>
                    </td>
                </tr>
            }

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

不要对每个子标签使用相同的 data-parent 属性:)，例如：

<div data-parent="#id1"></div>
<div data-parent="#id2"></div>
<div data-parent="#id3"></div>

【讨论】：

感谢您回答我的问题。我删除了 data-parent 功能，但不幸的是结果没有改变。