为了示例，我创建了两个选项卡（Tab1，Tab2）。每个选项卡下都有手风琴。两个选项卡中的手风琴的行为并不完全相同。在tab1下，如果我展开一个手风琴，所有其他手风琴会自动折叠，但是对于tab2，如果我展开一个手风琴，它不会折叠其他已展开的手风琴。我需要像Tab1中那样的行为。
以下是HTML和CSS中的最少代码：
ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
border-bottom: 1px solid #eee;
}
.nav li a {
font-size: 14px;
}
#accordionMenu {
max-width: 750px;
}
.panel-body {
padding: 0;
}
.panel-group .panel+.panel {
margin-top: 0;
border-top: 0;
}
.panel-group .panel {
border-radius: 0;
}
.panel-default>.panel-heading {
color: #333;
background-color: #fff;
border-color: #e4e5e7;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.panel-default>.panel-heading a {
display: block;
padding: 10px 15px;
text-decoration: none;
font-size: 14px;
}
.panel-default>.panel-heading a:after {
content: "";
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
}
.panel-default>.panel-heading a[aria-expanded="true"] {
background-color: #eee;
}
.panel-default>.panel-heading a[aria-expanded="true"]:after {
content: "\e113";
}
.panel-default>.panel-heading a[aria-expanded="false"]:after {
content: "\e114";
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/leaflet-logo.css">
<script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.29.1"></script>
<script type="text/javascript" src="js/uikit.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src='js/leaflet-logo.js'></script>
<script type="text/javascript" src='js/fespoint.js'></script>
<script type="text/javascript" src="js/fes.js"></script>
<script type="text/javascript" src='js/d3.v5.min.js'></script>
<script type="text/javascript" src='data/data3.js'></script>
<script type="text/javascript" src='js/color.js'></script>
</head>
<body>
<div id="exTab2" style="padding: 40px;">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab">Tab1</a>
</li>
<li><a href="#2" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="1">
<div>
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
MenuA
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav">
<li><a href="#">ItemA</a></li>
<li><a href="#">Item B</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
menu B
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav">
<li><a href="#" id="A1a">ItemA1 </a></li>
<li><a href="#" id="A1b">Item B2</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Menu C
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul class="nav">
<li><a href="#">B1 </a></li>
<li><a href="#">B2 </a></li>
<li><a href="#">B3 </a></li>
<li><a href="#">B4 </a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingsix">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix">
Menu D
</a>
</h4>
</div>
<div id="collapsesix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix">
<div class="panel-body">
<ul class="nav">
<li><a href="#">A11</a></li>
<li><a href="#">A12</a></li>
<li><a href="#">A13</a></li>
<li><a href="#">A2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="2">
<div>
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Menu 0
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Menu 1
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Menu 2
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
Menu 3
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
这两个手风琴都使用相同的id="accordionMenu"，请确保每个手风琴具有不同的ID，并确保此ID正确反映在它们各自项目的data-parent属性上
ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
border-bottom: 1px solid #eee;
}
.nav li a {
font-size: 14px;
}
#accordionMenu {
max-width: 750px;
}
.panel-body {
padding: 0;
}
.panel-group .panel+.panel {
margin-top: 0;
border-top: 0;
}
.panel-group .panel {
border-radius: 0;
}
.panel-default>.panel-heading {
color: #333;
background-color: #fff;
border-color: #e4e5e7;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.panel-default>.panel-heading a {
display: block;
padding: 10px 15px;
text-decoration: none;
font-size: 14px;
}
.panel-default>.panel-heading a:after {
content: "";
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
}
.panel-default>.panel-heading a[aria-expanded="true"] {
background-color: #eee;
}
.panel-default>.panel-heading a[aria-expanded="true"]:after {
content: "\e113";
}
.panel-default>.panel-heading a[aria-expanded="false"]:after {
content: "\e114";
}<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/leaflet-logo.css">
<script src="https://cdn.jsdelivr.net/npm/vega@4.4.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc12"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.29.1"></script>
<script type="text/javascript" src="js/uikit.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src='js/leaflet-logo.js'></script>
<script type="text/javascript" src='js/fespoint.js'></script>
<script type="text/javascript" src="js/fes.js"></script>
<script type="text/javascript" src='js/d3.v5.min.js'></script>
<script type="text/javascript" src='data/data3.js'></script>
<script type="text/javascript" src='js/color.js'></script>
</head>
<body>
<div id="exTab2" style="padding: 40px;">
<ul class="nav nav-tabs">
<li class="active">
<a href="#1" data-toggle="tab">Tab1</a>
</li>
<li><a href="#2" data-toggle="tab">Tab2</a>
</li>
</ul>
<div class="tab-content ">
<div class="tab-pane active" id="1">
<div>
<div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
MenuA
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav">
<li><a href="#">ItemA</a></li>
<li><a href="#">Item B</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
menu B
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav">
<li><a href="#" id="A1a">ItemA1 </a></li>
<li><a href="#" id="A1b">Item B2</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Menu C
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul class="nav">
<li><a href="#">B1 </a></li>
<li><a href="#">B2 </a></li>
<li><a href="#">B3 </a></li>
<li><a href="#">B4 </a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingsix">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapsesix" aria-expanded="false" aria-controls="collapsesix">
Menu D
</a>
</h4>
</div>
<div id="collapsesix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingsix">
<div class="panel-body">
<ul class="nav">
<li><a href="#">A11</a></li>
<li><a href="#">A12</a></li>
<li><a href="#">A13</a></li>
<li><a href="#">A2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="2">
<div>
<div class="panel-group" id="accordionMenu2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
Menu 0
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
Menu 1
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
Menu 2
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu2" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
Menu 3
</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<ul class="nav">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>