我已经仔细研究了其他人提出的关于手风琴风格可折叠面板集的许多问题，但我没能找到一个面板保持独立且不保留任何标题的面板。
我希望在一侧和另一侧都有许多按钮，点击按钮时会显示一个面板。我希望一次只显示一个面板。我正在使用BootStrap CSS框架（喜欢它）。
如果有人能帮我微调代码，我将不胜感激。我不明白我哪里错了。
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>只需再添加一层面板
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如果你想去掉任何额外的填充/边距，你可能需要调整内部内容的类。您唯一需要知道的是，bootstrap会隐藏数据父项下任何面板的子项，除非它们与刚才单击的数据目标相匹配。