Bootstrap 3.3.7手风琴在ASP.NET Core 1.1 foreach循环中异常求助

嘿，我一眼就看出问题出在哪了！你现在的代码里，每次foreach循环都会重新生成一个panel-group容器，这就导致每个手风琴项都属于独立的分组，Bootstrap的data-parent属性只能管控同一个分组内的面板，自然就出现了后面的项无法互斥折叠的情况。

问题根源拆解 #

你原代码中，panel-group和外层的bs-example都被放在了foreach循环内部，意味着每遍历一个Model项，就会创建一个新的手风琴分组。这样一来：

• 第一个项的data-parent="#accordionY"指向的是第一个分组
• 第二个项的data-parent="#accordionY"指向的是第二个分组（虽然id同名，但DOM里是多个独立元素）
  Bootstrap无法识别这些重复id的分组，只会对第一个分组生效，所以后面的项无法触发互斥折叠。

修正后的代码 #

把共享的容器移到循环外面，让所有面板都归属于同一个panel-group：

<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>

关键改动说明 #

1. 容器外移：将bs-example和panel-group从循环内移到循环外，确保所有panel都属于同一个手风琴分组
2. 统一父容器关联：所有面板的data-parent都指向同一个#accordionY，这样Bootstrap就能正确管控整个分组内的面板互斥折叠
3. 变量初始化位置：把int ij = 1;放在循环外，避免每次循环都重置计数

这样修改后，点击任何一个面板，其他已展开的面板都会自动折叠，完全符合手风琴的预期效果啦！

内容的提问来源于stack exchange，提问作者Code4Fun