打开关闭按钮函数 bootstrap

Question

我正在使用 bootstrap 折叠来隐藏和显示页面上的内容，我想稍微更改一下。这是来自 Bootply 的示例。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-6">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button>
      <div id="first" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div> 
    <div class="col-md-6 col-lg-6">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button>
      <div id="second" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div> 
  </div> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

假设第一个是开放的，第二个是关闭的。当我点击第二个并打开时，我希望第一个关闭（以及其他方式）。

是否可以用 javascript/jquery 做到这一点？我仍在学习 javascript/jquery 并且知之甚少，所以任何帮助将不胜感激。

Answer 1

Bootstrap 没有面板的手风琴

accordion example需要使用面板组件。但是，任何块都可以实现类似的行为。

您可以使用以下成分编写一个简单的 jQuery 脚本：

show.bs.collapse event:

This event fires immediately when the show instance method is called.
.collapse('hide') method:

Hides a collapsible element.
.collapse.in class:
- .collapse hides the content
- .collapse.in shows the content

请检查结果：Bootply

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-6">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">FIRST</button>
      <div id="first" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div> 
    <div class="col-md-6 col-lg-6">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">SECOND</button>
      <div id="second" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div> 
  </div> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

打开关闭按钮函数 bootstrap

Open close buttons function bootstrap

javascript

jquery

accordion

twitter-bootstrap

twitter-bootstrap-3

Bootstrap 没有面板的手风琴