为什么这个 Bootstrap 不会在一个部分打开的情况下关闭其他人？答案

【问题标题】：Why doesn't this Bootstrap collapse close others with one section open?为什么这个 Bootstrap 不会在一个部分打开的情况下关闭其他人？
【发布时间】：2016-10-12 23:56:10
【问题描述】：

我使用了标准的 Booststrap 代码，它曾经在开始时工作，所以一旦任何部分打开，另一个之前打开的部分就会关闭。

我在其中添加了一些其他折叠，并确保所有 ID 都是唯一的，并且它工作正常，除了关于在打开时关闭其他部分的一件小事。请帮我弄清楚

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel-default mainPFPanel">
                    <div class="mainPFPanelHeading" role="tab" id="headingMain1">
                        <h4 class="panel-title text-left">
                            <a role="button" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseMain1" aria-expanded="true" aria-controls="collapseMain1">
                                ТОРТЫ
                            </a>
                        </h4>
                    </div>
                    <div id="collapseMain1" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingMain1">
                        <div class="panel-body  mainPFPanelBody">
                            <div class="panel-group" id="accordionSub1" role="tablist" aria-multiselectable="true">
                                <div class="panel-default mainPFPanel">
                                    <div class="subPFPanelHeading" role="tab" id="headingSub11">
                                        <h4 class="panel-title text-left">
                                            <a role="button" data-toggle="collapse" data-parent="#accordionSub1"
                                               href="#collapseSub11" aria-expanded="true"
                                               aria-controls="collapseCollapse11">
                                                МУССОВЫЕ
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseSub11" class="panel-collapse collapse in" role="tabpanel"
                                         aria-labelledby="headingSub11">
                                        <div class="subPFBody">
                                            <div class="list-group">
                                                <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                                <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                                <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                                <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                                <a href="#" class="list-group-itemPF">Ривьера</a>
                                                <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                                <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                                <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                                <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                                <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                                <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-default mainPFPanel">
                                    <div class="subPFPanelHeading" role="tab" id="headingSub12">
                                        <h4 class="panel-title text-left">
                                            <a class="collapsed" role="button" data-toggle="collapse"
                                               data-parent="#accordionSub1" href="#collapseSub12"
                                               aria-expanded="false" aria-controls="collapseSub12">
                                                ЧИЗКЕЙКИ
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseSub12" class="panel-collapse collapse" role="tabpanel"
                                         aria-labelledby="headingSub12">
                                        <div class="subPFBody">
                                            <div class="subPFBody">
                                                <div class="list-group">
                                                    <a href="#" class="list-group-itemPF">Классический</a>
                                                    <a href="#" class="list-group-itemPF">Карамельный</a>
                                                    <a href="#" class="list-group-itemPF">Ягодный</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-default mainPFPanel">
                    <div class="mainPFPanelHeading" role="tab" id="headingMain2">
                    <h4 class="panel-title text-left">
                        <a class="collapsed" role="button" data-toggle="collapse"
                           data-parent="#accordionMain" href="#collapseMain2" aria-expanded="false"
                           aria-controls="collapseMain2">
                            ТАРТЫ
                        </a>
                    </h4>
                </div>
                    <div id="collapseMain2" class="panel-collapse collapse" role="tabpanel"
                     aria-labelledby="headingMain2">
                    <div class="subPFBody">
                        <div class="list-group">
                            <a href="#" class="list-group-itemPF">Ягодные</a>
                            <a href="#" class="list-group-itemPF">Лимонные</a>
                            <a href="#" class="list-group-itemPF">Фруктовые</a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="panel-default mainPFPanel">
                    <div class="mainPFPanelHeading" role="tab" id="headingMain3">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMain"
                           href="#collapseMain3" aria-expanded="false" aria-controls="collapseMain3">
                            ПОРЦИОННЫЕ ДЕСЕРТЫ
                        </a>
                    </h4>
                </div>
                    <div id="collapseMain3" class="panel-collapse collapse" role="tabpanel"
                     aria-labelledby="headingMain3">
                    <div class="panel-body">
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub31">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordionSub3"
                                       href="#collapseSub31" aria-expanded="true"
                                       aria-controls="collapseSub31">
                                        МУССОВЫЕ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub31" class="panel-collapse collapse in" role="tabpanel"
                                 aria-labelledby="headingSub31">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                        <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                        <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                        <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                        <a href="#" class="list-group-itemPF">Ривьера</a>
                                        <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                        <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                        <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                        <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                        <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                        <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub32">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordionSub3" href="#collapseSub32" aria-expanded="false"
                                       aria-controls="collapseSub32">
                                        КЕЙКПОПСЫ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub32" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingSub32">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub33">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordionSub3" href="#collapseSub33" aria-expanded="false"
                                       aria-controls="collapseSub33">
                                        КАПКЕЙКИ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub33" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingSub33">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-default">
                            <div class="subPFPanelHeading" role="tab" id="headingSub34">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse"
                                       data-parent="#accordionSub3" href="#collapseSub34" aria-expanded="false"
                                       aria-controls="collapseSub34">
                                        ТАРТАЛЕТКИ
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseSub34" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingSub34">
                                <div class="subPFBody">
                                    <div class="list-group">
                                        <a href="#" class="list-group-itemPF">Ягодные</a>
                                        <a href="#" class="list-group-itemPF">Лимонные</a>
                                        <a href="#" class="list-group-itemPF">Фруктовые</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

【问题讨论】：

在这里查看解决方案：stackoverflow.com/questions/14248194/…

标签： html twitter-bootstrap

【解决方案1】：

拥有正确的data-parent属性对于正确控制手风琴很重要，data-target需要正确设置。

这应该可行：

<!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                </head>
                <body>

                    <div class="container">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">ТОРТЫ</a>
                                    </h4>
                                </div>
                                <div id="collapse1" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <div class="container">
                                            <div class="panel-group" id="accordionSub">
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionSub" href="#collapse11">МУССОВЫЕ</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapse11" class="panel-collapse collapse in">
                                                        <div class="panel-body">
                                                            <div class="list-group">
                                                                <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                                                <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                                                <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                                                <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                                                <a href="#" class="list-group-itemPF">Ривьера</a>
                                                                <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                                                <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                                                <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                                                <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                                                <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                                                <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default">
                                                    <div class="panel-heading">
                                                        <h4 class="panel-title">
                                                            <a data-toggle="collapse" data-parent="#accordionSub" href="#collapse21">ЧИЗКЕЙКИ</a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapse21" class="panel-collapse collapse">
                                                        <div class="panel-body"><div class="list-group">
                                                            <a href="#" class="list-group-itemPF">Классический</a>
                                                            <a href="#" class="list-group-itemPF">Карамельный</a>
                                                            <a href="#" class="list-group-itemPF">Ягодный</a>
                                                        </div></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> ТАРТЫ </a>
                                    </h4>
                                </div>
                                <div id="collapse2" class="panel-collapse collapse">
                                    <div class="panel-body"><div class="list-group">
                                        <a href="#" class="list-group-itemPF">Ягодные</a>
                                        <a href="#" class="list-group-itemPF">Лимонные</a>
                                        <a href="#" class="list-group-itemPF">Фруктовые</a>
                                    </div></div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ПОРЦИОННЫЕ ДЕСЕРТЫ</a>
                                    </h4>
                                </div>
                                <div id="collapse3" class="panel-collapse collapse">
                                    <div class="panel-body">


                                        <div class="panel-group" id="accordionSub2">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse12">
                                                        МУССОВЫЕ </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse12" class="panel-collapse collapse in">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a>
                                                        <a href="#" class="list-group-itemPF">Манго-Маракуйя</a>
                                                        <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a>
                                                        <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a>
                                                        <a href="#" class="list-group-itemPF">Ривьера</a>
                                                        <a href="#" class="list-group-itemPF">Клюква-Малина</a>
                                                        <a href="#" class="list-group-itemPF">Black Bourbon</a>
                                                        <a href="#" class="list-group-itemPF">Шоколад-Малина</a>
                                                        <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a>
                                                        <a href="#" class="list-group-itemPF">Карамель-Шоколад</a>
                                                        <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a>
                                                    </div></div>
                                                </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse22">
                                                        КЕЙКПОПСЫ </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse22" class="panel-collapse collapse">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                                    </div></div>
                                                </div>
                                            </div>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse32">
                                                        КАПКЕЙКИ</a>
                                                    </h4>
                                                </div>
                                                <div id="collapse32" class="panel-collapse collapse">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Шоколад-Карамель</a>
                                                        <a href="#" class="list-group-itemPF">Бана-Малина</a>
                                                        <a href="#" class="list-group-itemPF">С Лимонным Курдом</a>
                                                    </div></div>
                                                </div>
                                            </div>

                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse42">
                                                        ТАРТАЛЕТКИ </a>
                                                    </h4>
                                                </div>
                                                <div id="collapse42" class="panel-collapse collapse">
                                                    <div class="panel-body"><div class="list-group">
                                                        <a href="#" class="list-group-itemPF">Ягодные</a>
                                                        <a href="#" class="list-group-itemPF">Лимонные</a>
                                                        <a href="#" class="list-group-itemPF">Фруктовые</a>
                                                    </div></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </body>
            </html>

【讨论】：

是的，确实如此，非常感谢您的快速正确回复！