Question

我有3个div，需要在点击时点击，同时隐藏上一个打开的div。点击link 1或link2时，如何关闭已打开的link 3？

我想打开单击的标签，如果有任何打开的div，则关闭。

以下代码：

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1">
      Link 1
</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2">
      Link 2
</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3">
      Link 3
</a>


<div class="collapse" id="collapseExample1">
     This is the description 1
</div> 
<div class="collapse" id="collapseExample2">
     This is the description 2
</div> 
<div class="collapse" id="collapseExample3">
     This is the description 3
</div>

Answer 1

<强> Woeking fiddle

将折叠的元素放在div中，然后添加show.bs.collapse事件：

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

希望这有帮助。

＆＃13;

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="accordion">

  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1">
    Link 1
  </a>
  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2">
    Link 2
  </a>
  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3">
    Link 3
  </a>
  <div class="collapse" id="collapseExample1">
    This is the description 1
  </div> 
  <div class="collapse" id="collapseExample2">
    This is the description 2
  </div> 
  <div class="collapse" id="collapseExample3">
    This is the description 3
  </div> 
</div>

＆＃13;

Bootstrap可折叠菜单打开，同时隐藏打开的div

1 个答案: