[英]MVC bootstrap 4 nested accordions closing script
Setting a Main accordion on a page with the usual sub elements 在具有通常子元素的页面上设置主手风琴
card 卡
card-header 卡头
collapse 坍方
card-body 卡体
Within some of the card-body tags are nested accordions 在某些卡体标签内有嵌套的手风琴
Using this script to close either a main one, or a nested one, when another of the same group is opened 当同一组中的另一个打开时,使用此脚本关闭一个主要的或嵌套的一个
$('#accordionMain').on('show.bs.collapse', '.collapse', function () {
$('#accordionMain').find('.collapse.show').collapse('hide');
});
$('#accordionCreditCards').on('show.bs.collapse', '.collapse', function () {
$('#accordionCreditCards').find('.collapse.show').collapse('hide');
});
However opening a nested accordion closes the main one. 但是,打开嵌套的手风琴会关闭主手风琴。 How do I overcome that? 我该如何克服?
Thank you 谢谢
HTML as requested 要求的HTML
<div id="accordionMain" role="tablist" aria-multiselectable="false">
<div class="card">
<div class="card-header" role="tab" id="Heading_1">
<h5 class="mb-0">
<a id="ToggleGroup1" title="View your account transactions" data-toggle="collapse" data-parent="#accordionMain" href="#collapse_1" aria-expanded="false" aria-controls="collapse_1"><i class="fa" aria-hidden="true"></i> Accounts</a>
</h5>
</div>
<div id="collapse_1" class="collapse" role="tabpanel" aria-labelledby="heading_1">
<div class="card-body" id="Accounts_Div">
<form>
<div class="form-group">
<label for="DatePickerStart">Search Start Date</label>
<input id="DatePickerStart" width="276" />
</div>
<div class="form-group">
<label for="DatePickerEnd">Search End Date</label>
<input id="DatePickerEnd" width="276" />
</div>
<div class="form-group">
<div id="AccountsTransactionsDiv">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="Heading_2">
<h5 class="mb-0">
<a id="ToggleGroup2" data-toggle="collapse" data-parent="#accordionMain" href="#collapse_2" aria-expanded="false" aria-controls="collapse_2"><i class="fa" aria-hidden="true"></i> My Credit Cards</a>
</h5>
</div>
<div id="collapse_2" class="collapse" role="tabpanel" aria-labelledby="heading_2">
<div class="card-body" id="AccountsCreditCardsDiv">
@*Start of Credit Cards Accordion*@
<div id="accordionCreditCards" role="tablist" aria-multiselectable="false">
<div class="card">
<div class="card-header" role="tab" id="Heading_ManageCC">
<h5 class="mb-0">
<a id="ToggleGroupCards" title="Add, edit or remove a credit or debit card" data-toggle="collapse" data-parent="#accordionCreditCards" href="#collapse_CardsManage" aria-expanded="false" aria-controls="collapse_CardsManage"><i class="fa" aria-hidden="true"></i> Manage your Credit Cards</a>
</h5>
</div>
<div id="collapse_CardsManage" class="collapse" role="tabpanel" aria-labelledby="Heading_ManageCC">
<div class="card-body" id="ManageCC_Div">
<p>Manage Cards Info goes here</p>
</div>
</div>
</div>@*End of Manage Cards*@
</div> @*End of Credit Cards Accordion*@
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="Heading_3">
<h5 class="mb-0">
<a id="ToggleGroup3" data-toggle="collapse" data-parent="#accordionMain" href="#collapse_3" aria-expanded="false" aria-controls="collapse_3"><i class="fa" aria-hidden="true"></i> My Bank Details</a>
</h5>
</div>
<div id="collapse_3" class="collapse" role="tabpanel" aria-labelledby="heading_3">
<div class="card-body" id="Purchases_Unpaid_Div">
</div>
</div>
</div>
This is probably a long winded solution, but it works... Add a hidden field 这可能是一个漫长的解决方案,但是它可以工作...添加隐藏字段
<input type="hidden" value="0" id="HiddenField" />
Each time one of the accordion links is clicked we need to pick that up to add the markup to that area - if it's a nested item then the value is changed to 1 每次单击其中一个手风琴链接时,我们都需要将其选中以将标记添加到该区域-如果它是嵌套项目,则其值将更改为1
$(function () {
$(".collapse").on('show.bs.collapse', function (e) {
var AccID = this.id;
var isSubMenu = $('#HiddenField').val();
switch (AccID) {
case 'collapse_3':
//Just opens bank details
if (isSubMenu == '0') {
$('#accordionMain').find('.collapse.show').collapse('hide');
}
$('#HiddenField').val('0');
break;
case 'collapse_CardsManage':
//Manage Credit Cards
$('#HiddenField').val('1');
break;
case 'collapse_CardsOnline':
//Make an online payment
$('#HiddenField').val('1');
break;
Amend the existing script 修改现有脚本
//$('#accordionMain').on('show.bs.collapse', '.collapse', function () {
// var isSubMenu = $('#HiddenField').val();
// if (isSubMenu == '0') {
// $('#accordionMain').find('.collapse.show').collapse('hide');
// }
//});
$('#accordionCreditCards').on('show.bs.collapse', '.collapse', function () {
$('#accordionCreditCards').find('.collapse.show').collapse('hide');
});
$('#accordionBank').on('show.bs.collapse', '.collapse', function () {
$('#accordionBank').find('.collapse.show').collapse('hide');
});
Messy, but it does the job :-) 凌乱,但它能完成工作:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.