javascript - 带 anchor 按钮的多束 Accordion 效果

Question

我在一个需要导航栏的网站上工作，或者我可以使用 anchor 按钮来显示我的内容，这里我在加载时显示内容时遇到问题。第一次点击任何按钮所有展开的元素都折叠起来，然后在第二次单击时它将按照我在代码 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>

示例:FIDDLE

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>

Updated Fiddle