单击后如何将折叠按钮移动到底部？

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();
  });


});

这是演示：链接