我已经使用了标准的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>
答案 0 :(得分：1)
正确的数据 - 父属性对于手风琴的正确控制非常重要，数据目标需要正确设置。
这应该有效：
<!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>