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