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

最佳答案

您非常接近,只需添加一些内容即可。...


为类“容器”的div添加一个ID。这是步骤2所需的
将data-parent属性添加到按钮中,并引用步骤1中的id。data-parent属性可确保当显示可折叠项之一时,指定父级下的所有可折叠元素都将被关闭。
将可折叠元素包装在“面板”类的div中。这是必需的,因为引导程序需要一定顺序的元素。有关更多详细信息,请参见以下答案。 Bootstrap 3 Accordion button toggle "data-parent" not working


更新的代码


<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 id="container" class="container">
  <div class="btn-group  btn-group-justified">
    <a href="#demo" class="btn btn-primary" data-toggle="collapse" data-parent="#container">List 1</a>
    <a href="#demo1" class="btn btn-primary" data-toggle="collapse" data-parent="#container">List 2</a>
    <a href="#demo2" class="btn btn-primary" data-toggle="collapse" data-parent="#container">List 3</a>
  </div>

  <div class="panel">
  <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>
</div>

09-10 05:13
查看更多