为什么这个Bootstrap不会在打开一个部分的情况下将其他人折叠起来呢? [英] Why doesn't this Bootstrap collapse close others with one section open?
本文介绍了为什么这个Bootstrap不会在打开一个部分的情况下将其他人折叠起来呢?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用了标准的Booststrap代码，并且在开始时就可以使用它，因此，一旦打开了任何部分，另一个在关闭之前就已经打开了.
I've used standart Booststrap code and it used to work at the beginning, so once any section was open the other one which was open before was getting closed.
我在其中添加了其他折叠，并确保所有ID都是唯一的，并且除在打开一个窗口时关闭其他部分的小事情之外，它都可以正常工作.请帮我弄清楚
I've added some other collapses in it and made shure that all the ID's unique and it works fine except one small thing about the closing other sections when one open . Please help me to figure out
<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>
推荐答案
具有正确的data-parent属性对于对手风琴进行适当控制很重要，数据目标需要正确设置.
It is important to have the correct data-parent attribute for proper control on the accordion, data-target needs to set correctly.
这应该有效:
<!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>这篇关于为什么这个Bootstrap不会在打开一个部分的情况下将其他人折叠起来呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
