如何在可折叠的表行下面添加div？

Question

我在做一种大厅。大厅里会有一张游戏清单。显示在<table>中。每个<tr>都包含<td>中的名字，没有播放器等。现在我想要的是，当我点击行时，应该显示相应的游戏细节。

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<button class="btn btn-primary">Button</button>

<table class="table text-align=">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
  
    <tr data-toggle="collapse" data-target="#game-1">
      <td>Game 1</td>
      <div class="collapse" id="game-1">Description of game 2</div>
    </tr>

    <tr data-toggle="collapse" data-target="#game-2">
      <td>Game 2</td>
      <div class="collapse" id="game-2">Description of game 2</div>
    </tr>
    
  </tbody>
</table>

​

我已经尝试过在<tr>中使用那个<tr>。但这并不是很好，它在桌子外显示了细节。

• 我想让细节就在行后出现。
• 我的第二个问题是，什么是最好的方式来展示一次只有一个。

注释：，我知道我可以在该行之后添加另一行，但这会破坏我的表的结构。所以我不想那么做。

Answer 1

下面是基于代码的简单实现：

​

$(function() {
    $('.collapse-item').click(function(e) {
        e.preventDefault();
        
        const target = $(this).data('target');
        
        if (!$(target).hasClass('show')) {
            $('.collapse-content').removeClass('show');
        }
        
        $(target).toggleClass('show');
    });
});

.table .collapse-content > td {
    padding: 0 .75rem;
}
.collapse-content > td > div {
    height: 0;
    opacity: 0;
}
.table .collapse-content.show > td {
    padding: .75rem;
}
.collapse-content.show > td > div {
    height: 100px;
    opacity: 1;
}
.collapse-content > td, .collapse-content > td > div  {
    -webkit-transition: all 1s ease;
    -moz-transition: all ease-in-out;
    transition: all 1s ease-in-out;
}
.collapse-content.show > td, .collapse-content.show > td > div {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
      
<button class="btn btn-primary">Button</button>

<table class="table text-align">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr class="collapse-item" data-target="#game-1">
            <td>Game 1</td>
        </tr>

        <tr class="collapse-content" id="game-1">
            <td>
                <div>Description of game 1</div>
            </td>
        </tr>

        <tr class="collapse-item" data-target="#game-2">
            <td>Game 2</td>
        </tr>

        <tr class="collapse-content" id="game-2">
            <td>
                <div>Description of game 2</div>
            </td>
        </tr>

    </tbody>
</table>

​

或者，您可以使用鞋带手风琴

​

#accordion {
    margin: 2rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
 
 <div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Game #1
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Game 1 details
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Game #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Game 2 details
            </div>
        </div>
    </div>
</div>

​

您还可以查看可数据子行。这是滑动实例。