ASP.NET Core Bootstrap 4手风琴仅部分扩展

问题描述

我正在尝试使用引导程序和ASP.NET Core动态生成手风琴。 目的是显示属于某个类别的所有术语，但问题是四个类别中只有前两个在扩展/折叠中。我可以看到，每个卡头和卡体在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>

解决方法

您的HTML有两个问题：

• .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="#[e-mail]">
                        @category.CategoryName
                    </button>
                </h5>
            </div>
            <div id="[e-mail]" 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>

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