嵌套手风琴上的 Bootstrap 4.3 Plus 和 Minus 图标

Question

我有一个嵌套的手风琴结构，我想在打开和折叠它们时显示一个加号和减号按钮。

<div style="padding: 10px">
    <div class="accordion" id="base-data">
        <div class="card">
            <div class="card-header" id="headingOne">
                <div id="buttonContainer" class="mb-0">
                    <button class="btn btn-link fa fa-plus collapsed" id="buttonBaseData" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="font-size:25px">
                        Basisdaten
                    </button>
                </div>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#base-data">
                <div class="card-body">
                    <partial name="_PartialBaseData" />
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="apll-data">
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed fa fa-plus" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:25px">
                        Antragsdaten
                    </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#apll-data">
                <div class="card-body">
                    <partial name="_PartialApplicationData" />
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="check-data">
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="font-size:25px">
                        Überprüfung
                    </button>
                </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#check-data">
                <div class="card-body">
                    <partial name="_PartialDataVerification" />
                </div>
            </div>
        </div>
    </div>

</div>

现在部分标记包含将在此位置注入的其他手风琴。 例如，这些是 _PartialApplicationData html 文件中的嵌套手风琴：

<div class="row">
    <div class="col">
        <div class="accordion" id="pvp-data">
            <div class="card">
                <div class="card-header" id="headingPVP">
                    <h2 class="mb-0">
                        <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapsePVP" aria-expanded="false" aria-controls="collapsePVP" style="font-size:25px">
                            PVP Daten
                        </button>
                    </h2>
                </div>
                <div id="collapsePVP" class="collapse" aria-labelledby="headingPVP" data-parent="#pvp-data">
                    <div class="card-body">
                        <partial name="_PartialPVPData" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="accordion" id="foe-data">
            <div class="card">
                <div class="card-header" id="headingPVP">
                    <h2 class="mb-0">
                        <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseFoe" aria-expanded="false" aria-controls="collapseFoe" style="font-size:25px">
                            Förderer Daten
                        </button>
                    </h2>
                </div>
                <div id="collapseFoe" class="collapse" aria-labelledby="headingFoe" data-parent="#foe-data">
                    <div class="card-body">
                        <partial name="_PartialFoerdererData" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="accordion" id="bank-data">
            <div class="card">
                <div class="card-header" id="headingBank">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseBank" aria-expanded="false" aria-controls="collapseBank" style="font-size:25px">
                            Bankdaten
                        </button>
                    </h2>
                </div>
                <div id="collapseBank" class="collapse" aria-labelledby="headingBank" data-parent="#bank-data">
                    <div class="card-body">
                        <partial name="_PartialBankData" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="accordion" id="identification-data">
            <div class="card">
                <div class="card-header" id="headingIdentification">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseIdentification" aria-expanded="false" aria-controls="collapseIdentification" style="font-size:25px">
                            Identifikationsdateien
                        </button>
                    </h2>
                </div>
                <div id="collapseIdentification" class="collapse" aria-labelledby="headingIdentification" data-parent="#identification-data">
                    <div class="card-body">
                        <partial name="_PartialIdentificationData" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我所做的尝试遵循 jquery 代码：

$(document).ready(function () {

    // Toggle plus minus icon on show hide of collapse element
    $(".collapse").on('show.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus").addClass("fas");
    }).on('hide.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus").addClass("fas");
    });
});

现在，当只有一个手风琴时它可以工作，但是当我打开和关闭嵌套的手风琴时，父手风琴也会更改我不想要的图标。 我应该怎么做才能做到这一点？ 我看到了其他问题，但它们与嵌套手风琴无关。

Answer 1

在 JavaScript 事件（如show.bs.collapse和hide.bs.collapse ）中的气泡。 有关官方文档，请参阅this 。

这意味着，在您的内部手风琴中触发的事件也会向外冒泡到父手风琴。

您可以通过将event.stopPropagation()添加到事件处理程序来防止冒泡。 您可以在此处阅读更多相关信息。

这将建议事件停止向上冒泡到文档根目录，并且应该导致您的手风琴图标仅针对您切换的手风琴进行更改 - 与它可能是嵌套的事实无关。

 $(document).ready(function() { // Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function(event) { $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus").addClass("fas"); event.stopPropagation(); }).on('hide.bs.collapse', function(event) { $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus").addClass("fas"); event.stopPropagation(); }); });

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <div style="padding: 10px"> <div class="accordion" id="base-data"> <div class="card"> <div class="card-header" id="headingOne"> <div id="buttonContainer" class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" id="buttonBaseData" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="font-size:25px"> Basisdaten </button> </div> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#base-data"> <div class="card-body"> <partial name="_PartialBaseData" /> </div> </div> </div> </div> <div class="accordion" id="apll-data"> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed fa fa-plus" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:25px"> Antragsdaten </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#apll-data"> <div class="card-body"> <div class="row"> <div class="col"> <div class="accordion" id="pvp-data"> <div class="card"> <div class="card-header" id="headingPVP"> <h2 class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapsePVP" aria-expanded="false" aria-controls="collapsePVP" style="font-size:25px"> PVP Daten </button> </h2> </div> <div id="collapsePVP" class="collapse" aria-labelledby="headingPVP" data-parent="#pvp-data"> <div class="card-body"> <partial name="_PartialPVPData" /> </div> </div> </div> </div> </div> <div class="col"> <div class="accordion" id="foe-data"> <div class="card"> <div class="card-header" id="headingPVP"> <h2 class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseFoe" aria-expanded="false" aria-controls="collapseFoe" style="font-size:25px"> Förderer Daten </button> </h2> </div> <div id="collapseFoe" class="collapse" aria-labelledby="headingFoe" data-parent="#foe-data"> <div class="card-body"> <partial name="_PartialFoerdererData" /> </div> </div> </div> </div> </div> <div class="col"> <div class="accordion" id="bank-data"> <div class="card"> <div class="card-header" id="headingBank"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseBank" aria-expanded="false" aria-controls="collapseBank" style="font-size:25px"> Bankdaten </button> </h2> </div> <div id="collapseBank" class="collapse" aria-labelledby="headingBank" data-parent="#bank-data"> <div class="card-body"> <partial name="_PartialBankData" /> </div> </div> </div> </div> </div> <div class="col"> <div class="accordion" id="identification-data"> <div class="card"> <div class="card-header" id="headingIdentification"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseIdentification" aria-expanded="false" aria-controls="collapseIdentification" style="font-size:25px"> Identifikationsdateien </button> </h2> </div> <div id="collapseIdentification" class="collapse" aria-labelledby="headingIdentification" data-parent="#identification-data"> <div class="card-body"> <partial name="_PartialIdentificationData" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="accordion" id="check-data"> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="font-size:25px"> Überprüfung </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#check-data"> <div class="card-body"> <partial name="_PartialDataVerification" /> </div> </div> </div> </div> </div>