【问题标题】:after open collapse element doesn't close on clicking打开折叠元素后单击时不会关闭
【发布时间】:2020-02-01 09:52:44
【问题描述】:

我正在使用 bootstrap 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>

【问题讨论】:

    标签: bootstrap-4 collapse


    【解决方案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>

    【讨论】:

    • 那么它与我的代码有何不同??我希望链接根据卡的 ID 是动态的
    • 你试过动态id的角度表达吗? {{ 'table-collapsed' + obj }}
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-26
    • 2014-02-07
    • 2013-04-08
    • 2018-05-12
    • 2020-01-30
    • 2017-09-29
    相关资源
    最近更新 更多