为什么我的一些手风琴会在其他手风琴被命名不同的时候将其分开。
我一直试图解决这个问题，当我在第二个，第三个或第四个面板打开第二个手风琴而第一个面板的第二个手风琴打开时，他们关闭它。同样的问题发生在不同的时间，其他小组将不同的面板与他们应该的面板相提并论。
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
body {
background: #111d27;
color: #111;
/*min-width: 320px;*/
min-width: 1024px;
font-size: 16px;
font-weight: 300;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
position: relative;
padding: 50px 20px;
}
.main {
text-align: center;
color: #777;
font-size: 14px;
padding-left: 0;
margin-bottom: 30px;
background-color: #F5F5F5;
font-family: 'Lato';
}
.main img {
display: block;
margin: auto;
width: 32px;
}
.main li:first-child,
.main li:last-child {
padding: 5px 5px 0px 0px;
}
.main li {
list-style: none;
padding: 13px;
}
.main li + li {
border-top: 1px solid #f0f0f0;
}
.main big {
font-size: 32px;
}
.main h3 {
margin-bottom: 0;
font-size: 36px;
}
.main h4 {
margin-bottom: 0;
font-size: 15px;
}
.main span {
font-size: 12px;
color: #999;
font-weight: normal;
}
.main li:nth-last-child(2) {
padding: 5px 13px;
}
.main button {
width: auto;
margin: auto;
font-size: 15px;
font-weight: bold;
border-radius: 50px;
color: #fff;
padding: 9px 24px;
background: #aaa;
opacity: 1;
transition: opacity .2s ease;
border: none;
outline: none;
}
.main button:hover {
opacity: .9;
}
.main button:active {
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}
/* main color */
.a-green big,
.a-green h3 {
color: #4c7737;
}
.a-green h4 {
color: #4c7737;
}
.a-green button {
background: #4c7737;
}
.a-yel big,
.a-yel h3 {
color: #ffbb42;
}
.a-yel h4 {
color: #ffbb42;
}
.a-yel button {
background: #ffbb42;
}
.a-red big,
.a-red h3 {
color: #e13c4c;
}
.a-red h4 {
color: #e13c4c;
}
.a-red button {
background: #e13c4c;
}
.a-blue big,
.a-blue h3 {
color: #2e5dea;
}
.a-blue h4 {
color: #2e5dea;
}
.a-blue button {
background: #2e5dea;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<section class="container">
<div class="row white">
<div class="block">
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-green">
<li>
<big>COLLAPSIBLE 1</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<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">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-yel">
<li>
<big>COLLAPSIBLE 2</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<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="#collapse4">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-blue">
<li>
<big>COLLAPSIBLE 3</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<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="#collapse7">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse8">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse9">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-red">
<li>
<big>COLLAPSIBLE 4</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<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="#collapse10">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse11">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse12">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse12" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<!-- /block -->
</div>
<!-- /row -->
</section>
答案 0 :(得分：1)
id值应该是唯一的，要使折叠工作，您必须为每个panel-group设置不同的ID值，并且与子链接的data-parent属性相同。
<div class="panel-group" id="accordion2">
...
<a data-toggle="collapse" data-parent="#accordion2" href="">
...
<div class="panel-group" id="accordion3">
...
<a data-toggle="collapse" data-parent="#accordion3" href="">
...
<div class="panel-group" id="accordion4">
...
<a data-toggle="collapse" data-parent="#accordion4" href="">
以下是完整代码：
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
body {
background: #111d27;
color: #111;
/*min-width: 320px;*/
min-width: 1024px;
font-size: 16px;
font-weight: 300;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
position: relative;
padding: 50px 20px;
}
.main {
text-align: center;
color: #777;
font-size: 14px;
padding-left: 0;
margin-bottom: 30px;
background-color: #F5F5F5;
font-family: 'Lato';
}
.main img {
display: block;
margin: auto;
width: 32px;
}
.main li:first-child,
.main li:last-child {
padding: 5px 5px 0px 0px;
}
.main li {
list-style: none;
padding: 13px;
}
.main li + li {
border-top: 1px solid #f0f0f0;
}
.main big {
font-size: 32px;
}
.main h3 {
margin-bottom: 0;
font-size: 36px;
}
.main h4 {
margin-bottom: 0;
font-size: 15px;
}
.main span {
font-size: 12px;
color: #999;
font-weight: normal;
}
.main li:nth-last-child(2) {
padding: 5px 13px;
}
.main button {
width: auto;
margin: auto;
font-size: 15px;
font-weight: bold;
border-radius: 50px;
color: #fff;
padding: 9px 24px;
background: #aaa;
opacity: 1;
transition: opacity .2s ease;
border: none;
outline: none;
}
.main button:hover {
opacity: .9;
}
.main button:active {
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}
/* main color */
.a-green big,
.a-green h3 {
color: #4c7737;
}
.a-green h4 {
color: #4c7737;
}
.a-green button {
background: #4c7737;
}
.a-yel big,
.a-yel h3 {
color: #ffbb42;
}
.a-yel h4 {
color: #ffbb42;
}
.a-yel button {
background: #ffbb42;
}
.a-red big,
.a-red h3 {
color: #e13c4c;
}
.a-red h4 {
color: #e13c4c;
}
.a-red button {
background: #e13c4c;
}
.a-blue big,
.a-blue h3 {
color: #2e5dea;
}
.a-blue h4 {
color: #2e5dea;
}
.a-blue button {
background: #2e5dea;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<section class="container">
<div class="row white">
<div class="block">
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-green">
<li>
<big>COLLAPSIBLE 1</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<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">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</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">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-yel">
<li>
<big>COLLAPSIBLE 2</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse5">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse6">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-blue">
<li>
<big>COLLAPSIBLE 3</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapse7">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapse8">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion3" href="#collapse9">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<ul class="main a-red">
<li>
<big>COLLAPSIBLE 4</big>
</li>
<li>
<h4>Acordions</h4>
</li>
<div class="panel-group" id="accordion4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion4" href="#collapse10">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse in">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion4" href="#collapse11">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion4" href="#collapse12">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse12" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<!-- /block -->
</div>
<!-- /row -->
</section>