如何实现点击卡片的时候展开一个表格

Question

如何实现点击卡片的时候展开一个表格，换句话说怎么让卡片具有折叠效果，各位有什么思路吗

Answer 1

那我写一个简单示例吧
HTML代码：

<div class="card">
  <div class="card-header">
    <h3>Card Title</h3>
    <i class="fas fa-chevron-down"></i>
  </div>
  <table class="table" id="card-table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript代码：

document.querySelector('.card-header').addEventListener('click', function() {
  const table = document.querySelector('#card-table');
  table.style.display = (table.style.display === 'none') ? 'table' : 'none';
});