ASP.NET Core Bootstrap 4 Accordion 仅部分扩展

Question

我正在尝试使用引导程序和 ASP.NET Core 动态生成手风琴。 目标是显示属于某个类别的所有术语，但问题是四个类别中只有前两个在扩展/折叠。我可以看到，每个 card-header 和 card-body 在 DOM 中都是可用的。 我的代码如下所示：

    <div class="accordion" id="accordionExample">
    @foreach (var category in this.Model.Categories)
    {
        var random = Guid.NewGuid();
        <div class="card">
            <div class="card-header" id="@random">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#@category.Id" aria-expanded="false" aria-controls="@category.Id">
                        @category.CategoryName
                    </button>
                </h5>
            </div>
            @foreach (var term in category.Terms)
            {
                <div id="@category.Id" class="collapse" aria-labelledby="@random" data-parent="#accordionExample">
                    <div class="card-body">
                        @term.GermanTranslation
                    </div>
                </div>

            }
        </div>
    }
</div>

Answer 1

您的 HTML 有 2 个问题：

• .collapse 的 ID 不是唯一的。您在条款循环中使用了@category.Id。
• 您只使用了一个数字作为 .collapse 的 ID。
  • 您可能会在 HTML5 中摆脱此限制，但 in HTML4, the ID must begin with a letter。

对我来说，生成随机数作为卡头的 ID 也是不必要的。手风琴不需要每个卡头的 ID 才能工作。您可以改为使用可折叠面板的类别 ID。

您说过要显示属于某个类别的所有术语。那么可折叠应该针对每个类别，而不是针对类别中的每个术语。类别术语的 foreach 循环应该在 .card-body 内。

我建议您尝试以下方法：

<div class="accordion" id="category-accordion">
    @foreach (var category in this.Model.Categories)
    {
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <button class="btn btn-link collapsed" type="button" 
                      data-toggle="collapse" data-target="#category-@category.Id">
                        @category.CategoryName
                    </button>
                </h5>
            </div>
            <div id="category-@category.Id" class="collapse data-parent="#category-accordion">
                <ul class="list-group list-group-flush">
                    @foreach (var term in category.Terms)
                    {
                        <li class="list-group-item">@term.GermanTranslation</li>
                    }
                </ul>
            </div>
        </div>
    }
</div>

这是为每个类别生成可折叠面板，包含多个翻译。