嵌套手风琴上的 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）bubble。 官方文档见this。

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

您可以通过将event.stopPropagation() 添加到您的事件处理程序来防止这种冒泡。你可以阅读更多关于here的信息。

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

$(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>