需要消失的其他按钮折叠列表，一旦一个按钮被按下

Need to disappear the others buttons collapse list, once a button is pressed

本文关键字：按钮一个消失其他列表折叠更新时间：2023-09-26

我在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，类为container。这是步骤2
为按钮添加data-parent属性，并引用步骤1中的id。data-parent属性确保在显示一个可折叠项时，指定父项下的所有可折叠元素都将关闭。
将可折叠元素包裹在一个div中，类为"panel"。这是必需的，因为引导需要元素的特定顺序。有关更多细节，请参阅以下答案。引导3手风琴按钮切换"data-parent"不工作

更新代码

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