带锚按钮的多束手风琴效果

Question

我在一个网站上工作，我需要导航条，或者我可以使用锚按钮来显示我的内容，这里我在load.first时间显示内容有问题，因为我点击任何按钮，所有展开的项目都会被折叠，而不是第二次单击，它将遵循我在代码java脚本中给出的指令。

以下是我所做的：

​

$('#button-1').click(function(e) {
  $('#collapseOne').collapse('show');
  $('#collapseTwo').collapse('show')
  $('#collapseThree').collapse('show');
  $('#collapsefour').collapse('show')
});
$('#button-2').click(function(e) {
  $('#collapseOne').collapse('hide');
  $('#collapseTwo').collapse('show')
  $('#collapseThree').collapse('show');
  $('#collapsefour').collapse('show')
});
$('#button-3').click(function(e) {
  $('#collapseOne').collapse('hide');
  $('#collapseTwo').collapse('hide')
  $('#collapseThree').collapse('show');
  $('#collapsefour').collapse('show')
});
$('#button-4').click(function(e) {
  $('#collapseOne').collapse('hide');
  $('#collapseTwo').collapse('hide')
  $('#collapseThree').collapse('hide');
  $('#collapsefour').collapse('show')
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="#accordion" id="button-1" class="btn btn-primary">button 1</a>
<a href="#accordion" id="button-2" class="btn btn-primary">button 2</a>
<a href="#accordion" id="button-3" class="btn btn-primary">button 3</a>
<a href="#accordion" id="button-4" class="btn btn-primary">button 4</a>
<div class="panel-group" id="accordion">
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
  test test test
  </div>
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"></a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse in">
  <div class="panel-body">
   test-1 test-1 test-1
  </div>
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></a></h4></div>
<div id="collapseThree" class="panel-collapse collapse in">
  <div class="panel-body">
   test-2 test-2 test-2 test-2
  </div>
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"></a></h4></div>
<div id="collapsefour" class="panel-collapse collapse in">
  <div class="panel-body">
    test-3 test-3 test-3
  </div>
</div>

​

示例:小提琴

Answer 1

您可以使用show()和hide()轻松地完成以下操作

​

$('#button-1').click(function(e) {
  $('#collapseOne').show("normal");
  $('#collapseTwo').show("normal");
  $('#collapseThree').show("normal");
  $('#collapsefour').show("normal");
});
$('#button-2').click(function(e) {
  $('#collapseOne').hide("normal");
  $('#collapseTwo').show("normal");
  $('#collapseThree').show("normal");
  $('#collapsefour').show("normal");
});
$('#button-3').click(function(e) {
  $('#collapseOne').hide("normal");
  $('#collapseTwo').hide("normal");
  $('#collapseThree').show("normal");
  $('#collapsefour').show("normal");
});
$('#button-4').click(function(e) {
  $('#collapseOne').hide("normal");
  $('#collapseTwo').hide("normal");
  $('#collapseThree').hide("normal");
  $('#collapsefour').show("normal");
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="#accordion" id="button-1" class="btn btn-primary">button 1</a>
<a href="#accordion" id="button-2" class="btn btn-primary">button 2</a>
<a href="#accordion" id="button-3" class="btn btn-primary">button 3</a>
<a href="#accordion" id="button-4" class="btn btn-primary">button 4</a>
<div class="panel-group" id="accordion">
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
  test test test
  </div>
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"></a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse in">
  <div class="panel-body">
   test-1 test-1 test-1
  </div>
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></a></h4></div>
<div id="collapseThree" class="panel-collapse collapse in">
  <div class="panel-body">
   test-2 test-2 test-2 test-2
  </div>
</div>
<div>
  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"></a></h4></div>
<div id="collapsefour" class="panel-collapse collapse in">
  <div class="panel-body">
    test-3 test-3 test-3
  </div>
</div>

​

更新Fiddle