asp.net-core - Bootstrap Accordion 3.3.7 在 foreach 循环中崩溃 asp.net core 1.1 无法正常工作

Question

我在我的模型中的 foreach 循环中的 ASP.NET Core 1.1 项目中实现了一个 Bootstrap（我使用 v3.3.7）Accordion，如下所示：

@{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="#">[e-mail]</a></p>
                    </div>
                </div>
            </div>

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

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

但是如果我现在点击第三个，第二个不会崩溃。所有其他的情况也是如此。

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

知道如何解决吗？

标签： asp.net-coretwitter-bootstrap-3bootstrap-accordion

Answer 1

我找到了解决方案。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="#">[e-mail]</a></p>
                        </div>
                    </div>
                </div>
                ij++;
             }
        </div>
    </div>

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