嵌套手风琴上的 Bootstrap 4.3 Plus 和 Minus 图标
[英]Bootstrap 4.3 Plus and Minus Icon on nested accordions
问题描述
I have a construct of nested accordions which I want to show a plus and minus button when I open and collapse them.
我有一个嵌套的手风琴结构，我想在打开和折叠它们时显示一个加号和减号按钮。
<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>
Now the partial tag contains the other accordions which will be injected in this place.现在部分标记包含将在此位置注入的其他手风琴。 For example these are the nested accordions in the _PartialApplicationData html file:例如，这些是 _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>
What I did try is following jquery code:我所做的尝试遵循 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");
});
});
Now when theres only one accordion then it works but when I open and close the nested ones the parent accordion changes the icon too which I dont want.现在，当只有一个手风琴时它可以工作，但是当我打开和关闭嵌套的手风琴时，父手风琴也会更改我不想要的图标。 What should I do to make this happen?我应该怎么做才能做到这一点？ I saw the other questions but they were not related to nested accordions.我看到了其他问题，但它们与嵌套手风琴无关。
1 个解决方案
解决方案1
1 已采纳 2022-01-27 07:57:50
In JavaScripts events (like show.bs.collapse and hide.bs.collapse ) bubble .在 JavaScript 事件（如show.bs.collapse和hide.bs.collapse ）中的气泡。 See this for official docs.有关官方文档，请参阅this 。
That means, the events fired in your inner accordions will also bubble outwards to the parent accordions.这意味着，在您的内部手风琴中触发的事件也会向外冒泡到父手风琴。
You can prevent that bubbling by adding event.stopPropagation() to your event handlers.您可以通过将event.stopPropagation()添加到事件处理程序来防止冒泡。 You can read more about that here .您可以在此处阅读更多相关信息。
This will advise the event to stop bubbling upwards towards the document root and should result in your accordion icons change exclusively for the accordion you toggled - independet of the fact it may be a nested one.这将建议事件停止向上冒泡到文档根目录，并且应该导致您的手风琴图标仅针对您切换的手风琴进行更改 - 与它可能是嵌套的事实无关。
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在嵌套的Bootstrap手风琴中添加加减符号 - How to add plus minus symbol to nested bootstrap accordions
将引导手风琴上的加减号图标移动到最右边 - Move plus-minus icon on bootstrap accordion to extreme right
JQuery切换加号和减号图标 - JQuery Toggle With Plus and Minus Icon
Bootstrap水平对齐嵌套的手风琴 - Bootstrap horizontally align nested accordions
自定义图标（加号和减号）在默认扩展面板上不起作用-Bootstrap - custom icon(plus-circle & minus-circle) not working on default expanded panel - Bootstrap
JQuery 切换类加减图标问题 - JQuery Toggle Class Plus and minus icon issue
移动菜单加号和减号图标（Vanilla JS） - Mobile Menu Plus and Minus icon (Vanilla JS)
如何在引导手风琴中添加加减符号 - How to add plus minus symbol to a bootstrap accordion
jQuery使用加号和减号图标隐藏和显示切换div - jQuery hide and show toggle div with plus and minus icon
twitter bootstrap手风琴折叠和关闭仅在加号和减号 - twitter bootstrap accordion collapse and close only on plus and minus
相关标签