Question

嗨，我正在尝试合并这种情况下的手风琴/折叠示例：

Bootstrap 4 change caret on clicking dropdown（可接受的答案）

带有Bootstrap表，可单击一行以折叠/展开其余部分。

[data-toggle="collapse"]:after {
display: inline-block;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  content: "\f054";
  transform: rotate(90deg) ;
  transition: all linear 0.25s;
  }
[data-toggle="collapse"].collapsed:after {
  transform: rotate(0deg) ;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div id="accordion" role="tablist">
  <table class="table">
    <tbody>
      <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

    <tr role="tab" id="headingOne">

        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>


    </tr>
  </a>
  <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
    <div class="card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </div>
  </div>
</tbody>
</table>




  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

如您所见，它不起作用，向上的箭头是可单击的，但在一行上方，而该行根本不可单击。请告知。

编辑：

我已将您的代码修改为仅用于表的解决方案（无卡）。我遇到的问题是我完成折叠div的方式出现在所有标头的表下方（而不是紧随相应标头的下方）。我将如何重新排列以下内容，以使#collapseOne出现在表格的第一行之后，而不是表格的下面。

<div id="accordion">
   <table class="table b-dark table-sm p-2 mb-0">
     <tbody>
       <tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
         <td class="border-bottom b-green text-center text-white">First</td>
         <td class="text-center border-right border-bottom text-white">Description</td>
         <td class="border-bottom text-center text-white">Time</td>
         <td class="border-bottom text-white text-right">
           <i class="fa"></i>
         </td>
       </tr>
       <tr id="headingTwo" data-toggle="collapse" data-target="#collapseTwo">
         <td class="border-bottom b-green text-center text-white">Second</td>
         <td class="text-center border-right border-bottom text-white">Desc</td>
         <td class="border-bottom text-center text-white">Time</td>
         <td class="border-bottom text-white text-right">
           <i class="fa"></i>
         </td>
       </tr>
     </tbody>
   </table>
   <div id="collapseOne" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
     <div class="text-white">
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
     </div>
  </div>
 <div id="collapseTwo" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
   <div class="text-white">
     Another anotherprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
   </div>
 </div>

Answer 1

加油！在<a></a>之后，除了<tr>之外，不能有<tbody>之类的元素。因此，您的<a></a>会显示在表格之外！

由于您的<a></a>没有任何内容，因此呈现为隐藏状态！

您不必使用<a><a>作为合拢触发器。您可以使用任何HTML元素。您只需要使用data-toggle="collapse"对其进行初始化。而且由于它不是锚标记，所以没有href。不用担心您可以改用data-target="xx"。

HTML

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <table>
                <tbody>
                    <tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
                        ...
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="collapseOne" class="collapse show" data-parent="#accordion">
            <div class="card-body"> ... </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">...</div>
        <div id="collapseTwo" class="collapse" data-parent="#accordion">
            <div class="card-body"> ... </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">...</div>
        <div id="collapseThree" class="collapse" data-parent="#accordion">
            <div class="card-body"> ... </div>
        </div>
    </div>
</div>

CSS（SASS）

您可以应用一些CSS，使该行看起来像是链接/可点击的。

#headingOne {
    cursor: pointer;
    color: var(--primary);
}

结果

小提琴： https://jsfiddle.net/aq9Laaew/131798/

换行符

我看到您也想在单击每个可折叠后更改插入符号。仅使用CSS即可轻松完成此操作，因为当可折叠折叠时，bootstrap会在其中添加.collapsed类。您可以更改font-awesome图标的内容，以根据该内容显示向左箭头或向下箭头。

<a class="collapsed" data-toggle="collapse">
    Collapsible Group Item
    <span class="float-right">
        <i class="fa"></i>
    </span>
</a>

[data-toggle="collapse"] {
  .fa:after {
    content: '\f078';  /* chevron-down */
  }

  &.collapsed {
    .fa:after {
      content: '\f054';  /* chevron-right */
    }
  }
}

小提琴： https://jsfiddle.net/aq9Laaew/131824/

Bootstrap 4将折叠与表合并

1 个答案:

HTML

CSS（SASS）

结果

换行符