Bootstrap 手风琴 3.3.7 在 foreach 循环中崩溃 asp.net 核心 1.1 无法正常工作

Question

我在我的 ASP.NET 核心 1.1 项目中实现了一个 Bootstrap（我使用 v3.3.7）手风琴，在我的模型中的 foreach 循环内：

@{int ij = 1;}
    @foreach (var item in Model)
{
    <div class="bs-example">
        <div class="panel-group" id="accordionY">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordionY" href="#collapse_@ij">@ij How do I activate my account?</a>
                    </h4>
                </div>
                <div id="collapse_@ij" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>The instructions to activate your account will be sent to your email once you have submitted the registration form. If you did not receive this email, your email service provider’s mailing software may be blocking it. You can try checking your junk / spam folder or contact us at <a href="#">help@samplestore.com</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
        ij++;
    }

现在的问题是它的行为很奇怪。当我第一次呈现我的页面时，所有项目都折叠起来。如果我单击第一项，它会正确展开。如果我点击第二个，第一个折叠，第二个展开。

但是如果我现在点击第三个，第二个不会折叠。所有其他人也是如此。

如果单击另一个元素，则只有第一个元素会折叠（如果已经展开）。所有其他的都保持展开状态。

知道如何解决吗？

Answer 1

此处是已解析的 DOM。如您所见，ID 是唯一的。

Answer 2

我找到了解决办法。 foreach 循环必须像这样嵌套到 <div class="panel-group" id="accordionY"> 中：

<div class="bs-example">
        <div class="panel-group" id="accordionY">
            @{int ij = 1;}
            @foreach (var item in Model)
            {
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordionY" href="#collapse_@ij">@ij How do I activate my account?</a>
                        </h4>
                    </div>
                    <div id="collapse_@ij" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>The instructions to activate your account will be sent to your email once you have submitted the registration form. If you did not receive this email, your email service provider’s mailing software may be blocking it. You can try checking your junk / spam folder or contact us at <a href="#">help@samplestore.com</a></p>
                        </div>
                    </div>
                </div>
                ij++;
             }
        </div>
    </div>

在这种情况下，行为是预期的。当我打开折叠的项目时，之前展开的项目会折叠，无论我点击哪个项目。

Bootstrap 手风琴 3.3.7 在 foreach 循环中崩溃 asp.net 核心 1.1 无法正常工作

Bootstrap Accordion 3.3.7 collapse within a foreach loop asp.net core 1.1 does not work properly

twitter-bootstrap-3

asp.net-core

bootstrap-accordion