如何將bootstrap4.0.0Collapse添加到html表？

您好我想知道如何將可折疊元素添加到 html 表格中？

我的代碼是這樣的：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th class="d-none d-md-table-cell" scope="col">Old Permalink</th>
      <th class="d-none d-md-table-cell" scope="col">New Permalink</th>
      <th class="text-center d-none d-md-table-cell" scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="20" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="20" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="21" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="21" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="22" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-md-none">
      <th>301</th>
      <td colspan="2" data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td colspan="2" data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="right">
        <button name="delete0" value="22" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

我正在尋找的是能夠按下TYPE“301”行并折疊表格內容的其余部分。

IMG 示例：

按突出顯示的 301 文本/行應該折疊其余資料。

通過按 301 文本/行折疊資料后的 IMG：

提前感謝您的時間結束作業，請確保包含有關引導 css 或 js 檔案的任何參考（我已包含 4.0.0 bootstrap ZIP 中包含的整個 CSS 和 JS 檔案夾）

uj5u.com熱心網友回復：

Bootstrap 沒有這個功能。這是一個適合您的選項，可以滿足您的需求。Bootstrap 不配合這個，所以如果你想看它的樣式，去這里：https ://codepen.io/shikkaba/pen/qBKbrWm

單擊 tbody 中的 tr 時，所有具有 .option 類的同級都被隱藏，并且下一個專案被取消隱藏。所有的“答案”都必須讓班級隱藏它們已經應用到它們上才能正常作業，因為這實際上只是切換一個班級。

$("table tbody tr.option").click(function() {
  // Show current `tr` and hide others
  $(this).siblings(".option").toggleClass("hide");
  $(this).next().toggleClass("hide");
});

.hide {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th class="d-none d-md-table-cell" scope="col">Old Permalink</th>
      <th class="d-none d-md-table-cell" scope="col">New Permalink</th>
      <th class="text-center d-none d-md-table-cell" scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-none d-md-table-row option">
      <th scope="row" data-label="Type">301</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  hide">
      <th>301</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row option">
      <th scope="row" data-label="Type">302</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  hide">
      <th>302</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row  option">
      <th scope="row" data-label="Type">303</th>
      <td data-label="Old Permalink">XX</td>
      <td data-label="New Permalink">XX</td>
      <td align="center" data-label="Delete Record">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
    <tr class="d-none d-md-table-row hide">
      <th>303</th>
      <td data-label="Old Permalink">
        <strong>Old Permalink:</strong> XX
      </td>
      <td data-label="New Permalink">
        <strong>New Permalink:</strong> XX
      </td>
      <td align="center">
        <button name="delete0" value="19" class="btn btn-danger grmlt-js-btn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

標籤：htmlcss推特引导引导程序 4

上一篇：WSO2：有沒有辦法在源代碼中自定義devportal和發布者？

下一篇：Bootstrap下拉按鈕串列隱藏并充滿