单击时如何将折叠按钮移至底部？

Question

我正在使用引导程序创建一张可以在点击时展开的卡片。为此，我正在使用崩溃。但是当我使用折叠按钮时，按钮保持不动，而我希望它移动到卡片的底部。底部的图片也应该很清楚地说明我正在尝试做什么。

点击折叠时如何向下移动按钮？我必须使用 Javascript 吗？

感谢阅读本文

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-2">
      <!-- horizontal spacing -->
  </div>
  <div class="col-8 ">
    <div class="card text">
      <div class="card-header">
        <div class="row">
          <div class="col-3">
            <div class="text-primary"> Name Nameson </div>
          </div>
          <div class="col-6">
            <!-- horizontal spacing -->
          </div>
          <div class="col-3">
            <div class="float-right text-secondary"> Aug 21 2019 </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <h5 class="card-title">Average Rating (4.5) </h5>
        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>

      </div>
      <div class="card-footer text-muted text-center">
        <a href="#" class="btn" data-toggle="collapse" data-target="#review">
          <div class="row">
          <div> Click to see full review </div>
          </div>
          <span class="oi oi-caret-bottom"></span>
        </a>
        <div class="collapse" id="review">
          Content goes here
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将附加内容移动到卡片页脚上方的单个collapse div...

https://codeply.com/p/R3QbJnLQDE

         <div class="card text">
                <div class="card-header">
                    <div class="row">
                        <div class="col-3">
                            <div class="text-primary"> Name Nameson </div>
                        </div>
                        <div class="col-6">
                            <!-- horizontal spacing -->
                        </div>
                        <div class="col-3">
                            <div class="float-right text-secondary"> Aug 21 2019 </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">Average Rating (4.5) </h5>
                    <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                </div>
                <div class="collapse" id="review">
                    <div class="card-body">
                        <h5 class="card-title">More </h5>
                        <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
                    </div>
                    ... (additional content sections here)
                </div>
                <div class="card-footer text-muted text-center">
                    <a href="#" class="btn" data-toggle="collapse" data-target="#review">
                        <div class="row">
                            <div> Click to see full review </div>
                        </div>
                        <span class="oi oi-caret-bottom"></span>
                    </a>
                </div>
         </div>

Answer 2

所有你需要重组你的DIV，在哪里分开你需要展示主动性和onClick事件显示更多......

HTML：

<div class="container">
  <div class="row">
    <div class="col-2">
      <!-- horizontal spacing -->
    </div>
    <div class="col-8 ">
      <div class="card text">
        <div class="card-header">
          <div class="row">
            <div class="col-3">
              <div class="text-primary"> Name Nameson </div>
            </div>
            <div class="col-6">
              <!-- horizontal spacing -->
            </div>
            <div class="col-3">
              <div class="float-right text-secondary"> Aug 21 2019 </div>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="inital">
            <h5 class="card-title">Average Rating (4.5) </h5>
            <p class="card-text">Contrary to popular belief, Lorem Ipsum is not </p>
          </div>
          <div class="ondemand">
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
            <div class="section">
              <h5 class="card-title">Average Rating (4.5) </h5>
              <p>Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this</p>
            </div>
          </div>
        </div>
        <div class="card-footer text-muted text-center">
          <a href="#" class="btn" data-toggle="collapse" data-target="#review">
            <div class="row">
              <div class="showmore">Load more</div>
              <div class="showless">Show Less</div>
            </div>
            <span class="oi oi-caret-bottom"></span>
          </a>
          <div class="collapse" id="review">
            Content goes here
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS: Jquery -

$(document).ready(function(){

  $('.ondemand').hide();
  $('.showmore').show();
  $('.showless').hide();

  $('.showmore').on('click', function(){
    $('.ondemand').slideDown("slow", "swing");
    $('.showmore').hide();
    $('.showless').show();
  });

  $('.showless').on('click', function(){
    $('.ondemand').slideUp("slow", "swing");
    $('.showmore').show();
    $('.showless').hide();
  });


});

这里是演示：link