引导程序 v4.4 |折叠 - 过渡不起作用

Question

我正在对我的表数据实施 Bootstrap Collapse。但是，当我按下按钮时，表格数据确实崩溃了，但没有过渡。我已经确认我包含了 jQuery，我正在使用折叠而不是折叠，并且我正在使用 aria-hidden="true" data-toggle="collapse" data-target 和 id。这不是屏幕宽度问题。

这是我的代码笔 https://codepen.io/mezavanessa/pen/RwrYgqM 的链接以及我的 HTML 和 CSS。

<section id="tableExpandedRows">
  <table class="table table-expanded expanded-row-bg-color">
    <thead>
      <tr>
        <th>heading one</th>
        <th>heading two</th>
        <th>heading three </th>
        <th>heading four</th>
        <th>heading five</th>
        <th>heading six</th>
        <th class="sr-only">Supplier ID</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="btn-collapse icon-caret-width" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <img src="assets/img/icon-caret-down.svg" alt="" class="icon icon-caret-down">
          </button>
          209
        </td>
        <td>Gate Parts for Repair</td>
        <td>Magnolia Heritage Construction</td>
        <td>$32,456.92</td>
        <td>Jul 15, 2019</td>
        <td>Geralt Rivera </td>
        <td class="sr-only">2165465536484</td>
      </tr>

      <tr class="collapse" id="collapseOne" role="cell" aria-hidden="true">
        <td colspan="3" class="collapse-data">
          <div class="table-expanded-data">
            <h5>Supplier ID</h5>
            <p>608</p>
          </div>

          <div class="table-expanded-data">
            <h5>Ship To</h5>
            <address>
              Fairview Gardens<br>
              567 Fairview Circle<br>
              Columbia, SC 29073
            </address>
          </div>

          <div class="table-expanded-data">
            <h5>Ship To Code</h5>
            <p>907</p>
          </div>
        </td>
      </tr>
</section>

    .table {
      background: $off-white;
    
      border: none;
    
      thead {
        background-color: rgba(5, 116, 176, 0.2);
        border: 1px solid rgba(5, 116, 176, 0.1);
    
        th {
          border: none;
        }
      }
    
      th {
        font-size: 0.875em;
      }
    
      th,
      td {
        padding: 1rem;
      }
    
      tr:first-child {
        td {
          border-top: none;
        }
      }
    }
    
    th {
      border: none;
    }
    
    td {
      border-color: rgba(52, 77, 91, 0.36);
    }
    
    .table-expanded-open tr:nth-child() {
      background-color: $table-accent-bg;
    }
    
    // Expanded Rows//
    
    .btn-collapse .icon-caret-down {
      transition: transform 0.2s ease-out;
    }
    
    .btn-collapse[aria-expanded="true"] .icon-caret-down {
      transform: rotate(0.5turn);
    }
    
    .table-expanded-data {
      display: inline-block;
      padding: 0 1em;
      vertical-align: top;
    }

Answer 1

这是尝试折叠表格时的一个已知问题，最好的选择是在 TR 中添加一个 DIV 并折叠那个。修复了密码笔https://codepen.io/feardarkness/pen/ExPeMry

<section id="tableExpandedRows">
  <h2>Expanded Rows</h2>
  <p>
    Users may interact with a table with Expanded Rows to display additional content by clicking on the Down-Caret icon to expand a row vertically. Hidden elements like those with the sr-only class are required to ensure all content can be read by a screen reader.
  </p>

  <table class="table table-expanded expanded-row-bg-color">
    <thead>
      <tr>
        <th>heading one</th>
        <th>heading two</th>
        <th>heading three </th>
        <th>heading four</th>
        <th>heading five</th>
        <th>heading six</th>
        <th class="sr-only">Supplier ID</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="btn-collapse icon-caret-width" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <img src="assets/img/icon-caret-down.svg" alt="" class="icon icon-caret-down">
          </button>
          209
        </td>
        <td>Gate Parts for Repair</td>
        <td>Magnolia Heritage Construction</td>
        <td>$32,456.92</td>
        <td>Jul 15, 2019</td>
        <td>Geralt Rivera </td>
        <td class="sr-only">2165465536484</td>
      </tr>

      <tr>
        <td colspan="6" class="collapse-data">
          <div class="collapse" id="collapseOne" role="cell" aria-hidden="true">
            <div class="table-expanded-data">
              <h5>Supplier ID</h5>
              <p>608</p>
            </div>

            <div class="table-expanded-data">
              <h5>Ship To</h5>
              <address>
                Fairview Gardens<br>
                567 Fairview Circle<br>
                Columbia, SC 29073
              </address>
            </div>

            <div class="table-expanded-data">
              <h5>Ship To Code</h5>
              <p>907</p>
            </div>
          </div>

        </td>
      </tr>
</section>