Question

我已经在我的模型的foreach循环中的ASP.NET Core 1.1项目中实现了Bootstrap（我使用v3.3.7）手风琴，

@{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 Accordion 3.3.7在foreach循环中崩溃asp.net core 1.1无法正常工作

2 个答案: