Question

我正在使用引导程序4来折叠卡中的一些数据，问题是，一旦我单击链接以显示折叠的元素，它就不再关闭。

错误在哪里？

<h5 class="card-header">
                            <a class="collapsed d-block" data-toggle="collapse" href="#table-collapsed{{obj.0}}" aria-expanded="true" aria-controls="collapse-collapsed" id="heading-collapsed">
                                <i class="fa fa-chevron-down pull-right"></i>
                                 Details

 <div id="table-collapsed{{obj.0}}" class="collapse" aria-labelledby="heading-collapsed">
                            <table class="card-body table-sm table table-hover text-right">
                                <tbody>
                                    <tr>
                                        <td>NICKNAME</td>
                                        <td>{{ obj.4 }}</td>
                                    </tr> 
                                    <tr>
                                        <td>DOB</td>
                                        <td>{{ obj.5 }}</td>
                                    </tr> 
                                </tbody>
                            </table>
                        </div>

Answer 1

尝试此代码

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

  <div class="card-header">
        <a class="collapsed d-block" data-toggle="collapse" href="#table-collapsed" aria-expanded="true"
          aria-controls="collapse-collapsed" id="heading-collapsed">
          <i class="fa fa-chevron-down pull-right"></i>
          Details
        </a>
      </div>
    
      <div id="table-collapsed" class="collapse" aria-labelledby="heading-collapsed">
        <table class="card-body table-sm table table-hover text-right">
          <tbody>
            <tr>
              <td>NICKNAME</td>
              <td>data1</td>
            </tr>
            <tr>
              <td>DOB</td>
              <td>data 2</td>
            </tr>
          </tbody>
        </table>
      </div>

打开折叠元素后无法关闭

1 个答案: