jquery - 可扩展的 Bootstrap 页脚

Question

我正在尝试使用 Accordion 在 Bootstrap 中制作可扩展的页脚。单击页脚时，我希望内容向上滑动并将其上方的部分向上推。目前，当点击所有内容时，所有内容都会滑到折叠下方。任何帮助将非常感激。

这是我正在处理的代码以及 fiddle

<section class="red">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Donec a lacinia turpis, ut auctor quam. Nam euismod elit et tortor tempus efficitur. Curabitur quis sapien id metus porta hendrerit vel nec libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis, nibh eu egestas tempus, purus
          velit finibus tellus, vitae eleifend ante ex non orci. Aliquam id dolor eu odio finibus fermentum. Morbi nec luctus purus. Integer tincidunt odio eros, non fringilla tortor placerat quis. Praesent consectetur massa nibh, ac maximus ante viverra
          sodales. Nunc id velit eu nisi congue pulvinar sit amet in tellus. Proin sit amet tortor nec purus suscipit dictum id in lacus. Aliquam congue auctor felis ut fermentum.</p>
      </div>
    </div>
  </div>
</section>

<section class="yellow">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Mauris finibus nibh in accumsan sodales. Vivamus interdum tempus nibh vel efficitur. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce suscipit eget turpis ac viverra. Donec
          imperdiet sem a leo elementum pulvinar. Donec scelerisque elit ipsum, non tristique libero tincidunt sed.</p>
      </div>
    </div>
  </div>
</section>

<section class="green">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Suspendisse ac libero maximus, sollicitudin ligula a, tempus turpis. Duis cursus, felis nec molestie cursus, nibh quam laoreet elit, id fringilla velit leo nec neque. Aenean nibh neque, ultricies non tortor non, lacinia suscipit nulla. Quisque
          in ultrices ante. Ut dignissim, urna ut egestas ornare, nulla erat accumsan augue, at fermentum libero eros semper ligula. Phasellus efficitur eros ac leo posuere, ultrices venenatis risus rutrum. Nullam facilisis volutpat pellentesque.</p>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  <div class="container-fluid p-0">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <p class="panel-title m-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  &#x2191;
                </a>
          </p>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="row">
              <div class="col-md-6 offset-md-3 align-self-center">
                Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet.Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna
                maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet. Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante,
                quis convallis purus iaculis sit amet.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</footer>

解决方案:

$("#collapseOne").on("show.bs.collapse", function() {
$("html, body").animate({ scrollTop: 999999 }, "slow");

});

fiddle

Answer 1

@reidb 你只需要改变你的标题和正文的位置。请按照以下代码:

<div class="container-fluid p-0">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">

        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="row">
              <div class="col-md-6 offset-md-3 align-self-center">
                Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet.Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna
                maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet. Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante,
                quis convallis purus iaculis sit amet.
              </div>
            </div>
          </div>
        </div>

        <div class="panel-heading">
          <p class="panel-title m-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  &#x2191;
                </a>
          </p>
        </div>
      </div>
    </div>
  </div>