嵌套引導手風琴中的奇怪折疊行為

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 時，請始終注意當前的作用域。