我在bootstrap 4中創(chuàng)建了一個下拉手風(fēng)琴樣式，并在stack overflow中使用JavaScript找到了這個有用的解決方案(Twitter Bootstrap:如何創(chuàng)建一個里面有手風(fēng)琴的下拉按鈕？).我修改了腳本以適應(yīng)我的網(wǎng)站導(dǎo)航風(fēng)格，但我陷入了如何讓JavaScript不僅找到ID: accordion，還找到ID: acc ordion1等問題。因此，當(dāng)我導(dǎo)航出菜單時，打開的手風(fēng)琴會自動隱藏。目前，該腳本只能隱藏ID為:accordion的第一個面板。對于這個項目，我不能像Bootstrap 4中描述的那樣使用form標(biāo)簽:如何創(chuàng)建一個里面有手風(fēng)琴的下拉菜單？。共鋪樣品

此外，我如何使手風(fēng)琴面板打開多個。

<div class="collapse navbar-collapse " id="navbarContent">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        ONBOARDING
                        </a>

                        <div class="dropdown-menu ">
                            <div class="accordion" id="accordion">
                                <div>
                                    <a class="nav-link" href="#" target="_blank">
                        Item 01
                            </a>
                                </div>
                                <div>
                                    <a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Item 02
                        </a>
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
                                        <div> <a class="nav-link" href="#" target="_blank">
                                        Item 02A</a>
                                        </div>
                                        <div> <a class="nav-link" href="#" target="_blank">
                            Item 02B
                                </a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            OFFBOARDING
                        </a>

                        <div class="dropdown-menu ">
                            <div class="accordion" id="accordion1">
                                <div>
                                    <a class="nav-link" href="#" target="_blank">
                        Item 01
                            </a>
                                </div>
                                <div>
                                    <a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion1" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">
                        Item 02
                        </a>
                                    <div id="collapsetwo" class="collapse px-3" aria-labelledby="headingOne">
                                        <div> <a class="nav-link" href="#" target="_blank">
                            Item 02A
                                </a></div>
                                        <div> <a class="nav-link" href="#" target="_blank">
                            Item 02B
                                </a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

    <script>
        $('.dropdown-accordion').on('show.bs.dropdown', function(event) {
            var accordion = $(this).find($(this).data('accordion'));
            accordion.find('.show').collapse('hide');
        });
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $($(this).data('parent')).find('.collapse.show').collapse('hide');
        $($(this).attr('href')).collapse('show');
    })
    </script>

根據(jù)您的腳本，您實際上只是隱藏了id='accordion '的div。如果你想把它們都隱藏起來，你必須知道你有多少個手風(fēng)琴，然后遍歷所有的手風(fēng)琴。

<script>
        $('.dropdown-accordion').on('show.bs.dropdown', function(event) {
            for(var i = 0; i < nrAccordions; i++)
            {
               var accordion = $(this).find($(this).data('accordion'+i));
               accordion.find('.show').collapse('hide');
            }
        });
    </script>