1
我已經瀏覽了其他人提出的關於手風琴風格的可摺疊面板集的衆多問題，但我一直無法找到其中面板保持獨立並且不保留各種標題的面板。javascript bootstrap手風琴
我正在尋找在一側和另一側有多個按鈕，當單擊按鈕時要顯示的面板。我只想要一次顯示一個面板。我正在使用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">
\t <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>
\t <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>
\t </div>
</div>
</div>
</body>
</html>
那究竟是什麼問題呢？我可以假設這「不起作用」，但你期望什麼樣的行爲？它做了什麼？如果您可以創建Stack Snippet或JSFiddle來演示這兩種情況，那將會很有幫助。 –
好主意！我甚至沒有意識到我可以創建一個堆棧片段。我已經這樣做了，設計是正確的。我如何讓單個面板只顯示？也就是說，如果我點擊查看1，概覽面板會消失，查看1面板會出現？我知道你可以爲手風琴做一些事情，但我不確定這種情況對我有何幫助:(謝謝Tieson！ – Munzo