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

发布时间：2023-02-18 09:05:21 所属栏目：asp.Net 来源：互联网

导读：如何解决ASP.NET Core Bootstrap 4手风琴仅部分扩展？我正在尝试使用引导程序和ASP.NET Core动态生成手风琴。目的是显示属于某个类别的所有术语，但问题是四个类别中只有前两个在扩展/折叠中。我可以看到，每个卡头和卡体在DOM中都可用。我的代码如下： d

　　如何解决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="#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>
　　这将为每个类别生成可折叠的面板，其中包含多个翻译。

（编辑：甘南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!