MVC bootstrap 4 嵌套手风琴关闭脚本

Question

在包含常用子元素的页面上设置 Main accordion

卡片

card-header

崩溃

card-body

在一些 card-body 标签中是嵌套的手风琴

当同一组中的另一个打开时，使用此脚本关闭主脚本或嵌套脚本

 $('#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');
    });

但是打开嵌套手风琴会关闭主手风琴。我该如何克服呢？

谢谢

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>

Answer 1

这可能是一个冗长的解决方案，但它确实有效...添加一个隐藏字段

<input type="hidden" value="0" id="HiddenField" />

每次单击其中一个手风琴链接时，我们都需要选择它以将标记添加到该区域 - 如果它是嵌套项目，则值更改为 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;

修改现有脚本

//$('#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');
    });

杂乱无章，但它完成了工作:-)

MVC bootstrap 4 嵌套手风琴关闭脚本

MVC bootstrap 4 nested accordions closing script

jquery

asp.net-mvc-4

bootstrap-4