时间戳

首页 > 解决方案 > 如何在页面加载时将引导折叠目标启动为折叠？

javascript - 如何在页面加载时将引导折叠目标启动为折叠？

问题描述

我知道之前有人问过这个问题，但我已经阅读了 10 多篇帖子，但仍然无法弄清楚如何开始折叠我的行，以便当我点击它时它们会展开。

<table class="soloduoquadtable">
                        <tr>
                            <th colspan="2" class="soloduoquadtable" style="background-color:#aef54d; padding-left:9%;"><b>DUO</b><img src="2people.png" style="height:100%; width:12%;" align="right" /></th>
                        </tr>
                        <tr>
                            <td colspan="2" style="border-right:1px black solid; border-top:1px black solid; text-align:center; font-size:20px; background-color:lightgrey; padding-top:10px;"><b>Rank 250 <pre>Top 1%</pre></b></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="soloduoquadtable">Win%<pre>10</pre></td>
                        </tr>
                        <tr>
                            <td class="soloduoquadtable" style="border-right:1px solid black; width:50%">KDA<pre>25252</pre></td>
                            <td class="soloduoquadtable">Top 10%<pre>15</pre></td>
                        </tr>

                        <tr id="demo" class="collaspe">
                            <td  colspan="2" class="soloduoquadtable">Hello</td>
                        </tr>


                    </table>
                    <input  type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="width:inherit;" value="MORE INSIGHTS" />

标签： javascripthtmlbootstrap-4

解决方案

这是一个使用引导程序的带有折叠行的数据表的工作示例：

$(document).ready(function() {
  if ($('.table').length > 0) {
    $('.table .header').on("click", function() {
      $(this).toggleClass("active", "").nextUntil('.header').css('display', function(i, v) {
        return this.style.display === 'table-row' ? 'none' : 'table-row';
      });
    });
  }
})
.table tr:not(.header) {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-bordered">
    <tr class="header">
      <td colspan="2">Header 1</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="header">
      <td colspan="2">Header 2</td>
    </tr>
    <tr>
      <td>date</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="header">
      <td colspan="2">Header 3</td>
    </tr>
    <tr>
      <td>date</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="header">
      <td colspan="2">Header 4</td>
    </tr>
    <tr>
      <td>date</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
  </table>
</div>

推荐阅读