嵌套引导手风琴中的奇怪折叠行为

Question

我使用引导程序构建了一个手风琴树视图。 我有一些代码可以控制手风琴的状态：

$('.category-accordion').on('shown.bs.collapse', function(currentTarget) {
    currentTarget.stopPropagation();
    lockUI();
    var categoryId = $(currentTarget.target).attr("id").substr("collapse-".length, $(currentTarget.target).attr("id").length);
    $.ajax({
        url: currentUrl + separator + 'handler=UserCompetencies',
        data: { categoryId: categoryId }
    }).done(function(result) {
        $(currentTarget.target).find('.hideWhenLoaded:last').removeClass("d-flex");
        $(currentTarget.target).find('.hideWhenLoaded:last').addClass("d-none");
        $(currentTarget.target).find('.showWhenLoaded:first').removeClass("d-none");

        $(currentTarget.target).find('.content:last').html(result);
    }).always(function() {
        unlockUI();
    });
});
$('.category-accordion').on('hidden.bs.collapse', function(currentTarget) {
    currentTarget.stopPropagation();
    $(this).find('.collapse').collapse('hide');

    $(currentTarget.target).find('.hideWhenLoaded:last').removeClass("d-none");
    $(currentTarget.target).find('.hideWhenLoaded:last').addClass("d-flex");

    $(currentTarget.target).find('.showWhenLoaded:first').addClass("d-none");

    $(currentTarget.target).find('.content:last').html("");
});

这是 HTML 本身，它是 Razor 视图组件，我递归调用它来构建树视图结构：

<div class="card">
        <div class="card-header" id="heading-2">
            <div class="row">
                <div class="col-md-6">
                    <a class="collapsed disable-when-loading" role="button" data-toggle="collapse" href="#collapse-@Model.CategoryId" aria-expanded="false" aria-controls="collapse-@Model.CategoryId">
                        @Model.LocalizedName
                    </a>
                </div>
                <div class="col-md-6">
                    @if (Model.ShowEditAndDeleteActions)
                    {
                        <a asp-page="EditCategory" asp-route-id="@Model.CategoryId"><i class="cursor-pointer text-erni bi bi-pencil-square"></i></a> @:|
                        <a asp-page="DeleteCategory" asp-route-id="@Model.CategoryId"><i class="cursor-pointer text-erni bi bi-trash"></i></a>
                    }
                </div>
            </div>
        </div>
        <div id="collapse-@Model.CategoryId" class="collapse" data-parent="#accordion-@Model.ParentCategoryId" aria-labelledby="heading-2">
            <div class="card-body">
                <div class="category-accordion" id="accordion-@Model.CategoryId">
                    <div class="showWhenLoaded d-none">
                        @foreach (var category in Model.ChildCategories)
                        {
                            @await Component.InvokeAsync("CategoryModelComponent", category)
                        }
                        <div class="content row">
                        </div>
                    </div>
                    <div class="d-flex justify-content-center hideWhenLoaded">
                        <div class="spinner-border text-erni" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

加载手风琴时，我从服务器加载一些东西，然后将它们呈现在一个 div 中，该 div 会在每个手风琴上呈现。 为此，这里有两个 div 和几个类， showWhenLoaded和hideWhenLoaded 。 我最初只显示hideWhenLoaded ，然后在加载完成后隐藏它，显示showWhenLoaded并将内容附加到带有content类的 div 中。

到目前为止，一切都很好。 现在，当用户折叠手风琴时，我也折叠了它的所有子项。 我使用函数$(this).find('.collapse').collapse('hide'); 为达到这个。 这主要是可行的，但有时，当我展开另一个手风琴时，之前打开的手风琴会崩溃，而我展开的手风琴也会崩溃，我不知道为什么会发生这种情况。 可以在此处看到此行为的 gif：

我认为问题是以下功能之一：

• $(this).find('.collapse').collapse('hide');
• currentTarget.stopPropagation();

有人知道发生了什么吗？

Answer 1

我太傻了。 问题确实是这一行：

$(this).find('.collapse').collapse('hide');

问题是我使用$(this)而不是$(currentTarget.target) 。 如此简单，但我在这个问题上浪费了几个小时哈哈。 在编写 jQuery 时，请始终注意当前的作用域。