如何在可复用Razor组件中实现Bootstrap手风琴独立折叠？

你的问题核心是所有手风琴项使用了重复的ID和绑定目标，同时每个项都嵌套在独立的.accordion容器中，导致Bootstrap无法区分不同的手风琴项，从而触发同步操作。以下是两种场景的解决方案：

场景1：允许同时展开多个手风琴（独立开关） #

将所有手风琴项放在同一个.accordion容器下，为每个项生成唯一的ID，去掉data-bs-parent属性（该属性会强制同一组内只能展开一个）：

<div class=@FormListClass>
    <!-- 单个accordion容器包裹所有项 -->
    <div class="accordion" id="accordionForms">
        @foreach (var trackingFormShareable in TrackingFormShareables)
        {
            // 利用TrackingForm的唯一Id生成专属ID，也可以用循环索引@index
            var collapseId = $"collapse-{trackingFormShareable.Id}";
            var headingId = $"heading-{trackingFormShareable.Id}";

            <div class="accordion-item">
                <h2 class="accordion-header" id="@headingId">
                    <button class="accordion-button" type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#@collapseId" 
                            aria-expanded="true" 
                            aria-controls="@collapseId">
                        @trackingFormShareable.TrackingFormName
                    </button>
                </h2>
                <div id="@collapseId" class="accordion-collapse collapse show" 
                     aria-labelledby="@headingId">
                    <div class="accordion-body">
                        @foreach (var courseItem in trackingFormShareable.CourseItems)
                        {
                            <CourseItemTrackingDetails ClickedCourseItem='_clickedCourseItem' 
                                                       IsFolded='@(CurrentCourseItemId != null)' 
                                                       TrackingCourseItemShareable=courseItem>
                            </CourseItemTrackingDetails>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
</div>

场景2：同一组内只能展开一个手风琴（展开一个自动关闭其他） #

保留data-bs-parent属性指向共同的.accordion容器ID，同时用唯一ID区分每个项，还可以通过组件字段跟踪当前展开状态：

Razor代码： #

<div class=@FormListClass>
    <div class="accordion" id="accordionForms">
        @foreach (var trackingFormShareable in TrackingFormShareables)
        {
            var collapseId = $"collapse-{trackingFormShareable.Id}";
            var headingId = $"heading-{trackingFormShareable.Id}";
            // 判断当前项是否为展开状态
            var isExpanded = trackingFormShareable.Id == CurrentExpandedId;

            <div class="accordion-item">
                <h2 class="accordion-header" id="@headingId">
                    <button class="accordion-button @(isExpanded ? "" : "collapsed")" type="button" 
                            data-bs-toggle="collapse" 
                            data-bs-target="#@collapseId" 
                            aria-expanded="@isExpanded" 
                            aria-controls="@collapseId">
                        @trackingFormShareable.TrackingFormName
                    </button>
                </h2>
                <div id="@collapseId" class="accordion-collapse collapse @(isExpanded ? "show" : "")" 
                     aria-labelledby="@headingId"
                     data-bs-parent="#accordionForms">
                    <div class="accordion-body">
                        @foreach (var courseItem in trackingFormShareable.CourseItems)
                        {
                            <CourseItemTrackingDetails ClickedCourseItem='_clickedCourseItem' 
                                                       IsFolded='@(CurrentCourseItemId != null)' 
                                                       TrackingCourseItemShareable=courseItem>
                            </CourseItemTrackingDetails>
                        }
                    </div>
                </div>
            </div>
        }
    </div>
</div>

组件后台代码： #

@code {
    [Parameter]
    public List<TrackingFormShareable> TrackingFormShareables { get; set; } = new();

    // 跟踪当前展开的表单ID，根据你的实体类型调整类型（比如string/int）
    private int? CurrentExpandedId;

    // 可选：手动控制展开状态的方法，若依赖Bootstrap JS自动处理可省略
    private void ToggleExpand(int formId)
    {
        CurrentExpandedId = CurrentExpandedId == formId ? null : formId;
    }
}

关键修改点总结 #

• 唯一ID生成：用每个trackingFormShareable的唯一标识（如Id）或循环索引生成collapseId、headingId，避免重复。
• 统一容器：将所有手风琴项放在同一个.accordion容器下，确保Bootstrap能识别为同一组。
• 控制互斥性：通过data-bs-parent属性控制是否允许同时展开多个项，不需要则移除该属性。

内容的提问来源于stack exchange，提问作者J. T.