Question

我在btn-group中有3个按钮，我需要看到按下的按钮列表，按下其他按钮后，折叠列表应该消失，并且只显示按下按钮列表。

请建议。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="btn-group  btn-group-justified">
    <a href="#demo" class="btn btn-primary" data-toggle="collapse">List 1</a>
    <a href="#demo1" class="btn btn-primary" data-toggle="collapse">List 2</a>
    <a href="#demo2" class="btn btn-primary" data-toggle="collapse">List 3</a>
  </div>
  <div id="demo" class="collapse in">
    <table class="table table-striped table-bordered table-hover">
      <thead>
      </thead>
      <tbody data-link="row" class="rowlink">
        <tr class='clickable-row' data-href='url://link-for-first-row/'>
          <td><a href="#inputmask">Input mask</a>
          </td>
          <tr class='clickable-row' data-href='url://link-for-first-row/'>
            <td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
            </td>
            <tr class='clickable-row' data-href='url://link-for-first-row/'>
              <td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
              </td>
      </tbody>
    </table>

  </div>


  <div id="demo1" class="collapse">
    <table class="table table-striped table-bordered table-hover">
      <thead>
      </thead>
      <tbody data-link="row" class="rowlink">
        <tr class='clickable-row' data-href='url://link-for-first-row/'>
          <td><a href="#inputmask">Input mask</a>
          </td>
          <tr class='clickable-row' data-href='url://link-for-first-row/'>
            <td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
            </td>
            <tr class='clickable-row' data-href='url://link-for-first-row/'>
              <td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
              </td>
      </tbody>
    </table>
  </div>

  <div id="demo2" class="collapse">
    <table class="table table-striped table-bordered table-hover">
      <thead>
      </thead>
      <tbody data-link="row" class="rowlink">
        <tr class='clickable-row' data-href='url://link-for-first-row/'>
          <td><a href="#inputmask">Input mask</a>
          </td>
          <tr class='clickable-row' data-href='url://link-for-first-row/'>
            <td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
            </td>
            <tr class='clickable-row' data-href='url://link-for-first-row/'>
              <td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
              </td>
      </tbody>
    </table>
  </div>

</div>

Answer 1

你非常接近，只需要添加一些东西......

使用class＆＃34; container＆＃34;将id添加到div中。第2步需要这样做
将data-parent属性添加到按钮并引用步骤1中的id。data-parent属性确保在显示其中一个可折叠项目时，将关闭指定父项下的所有可折叠元素。
使用class＆＃34; panel＆＃34;将可折叠元素包装在div中。这是必需的，因为bootstrap需要一定数量的元素。有关详细信息，请参阅以下答案。 Bootstrap 3 Accordion button toggle "data-parent" not working

更新了代码

＆＃13;

COPY

＆＃13;

按下按钮后，需要消失其他按钮折叠列表

1 个答案: