Question

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

这就是我所做的：

＆＃13;

$('#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')
});

＆＃13;

<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>

＆＃13;

示例：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

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

1 个答案: