javascript - 折叠后自动滚动

问题描述

我的部分有 6 张图片，首先你只能看到其中的 3 张，当你点击阅读更多时会打开另外 3 张图片（折叠），但问题是，当那个按钮会打开屏幕不跟随按钮向下，当我点击少读时，屏幕不跟随按钮向上！但屏幕停留在固定位置，我必须向下/向上滚动才能看到其他图像

// Read more/less option

$(document).ready(function () {
  $('.nav-toggle').click(function () {
      var collapse_content_selector = $(this).attr('href');
      var toggle_switch = $(this);
      $(collapse_content_selector).toggle(function () {
          if ($(this).css('display') == 'none') {
              toggle_switch.html('Read More');
          } else {
              toggle_switch.html('Read Less');
          }
      });
  });

});

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

<section>
    <div class="container">
      <div class="row">
        <h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>


        <div class="col-md-4 mb-4 aktion-text">
          <h2></h2>
          <div class="hovereffect">
            <img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
          </div>
          <h2 class="center">Industrie</h2>
        </div>

        <div class="col-md-4 mb-4 aktion-text">
          <h2></h2>
          <div class="hovereffect">
            <img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
          </div>
          <h2 class="center">Industrie</h2>
        </div>

        <div class="col-md-4 mb-4 aktion-text">
          <h2></h2>
          <div class="hovereffect">
            <img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
          </div>
          <h2 class="center">Industrie</h2>
        </div>

      </div>
    </div>

    <div class="container">
      <div class="row" id="collapse" style="display:none">

        <div class="col-md-4 mb-4 aktion-text">
          <h2></h2>
          <div class="hovereffect">
            <img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
          </div>
          <h2 class="center">Industrie</h2>
        </div>

        <div class="col-md-4 mb-4 aktion-text">
          <h2></h2>
          <div class="hovereffect">
            <img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
          </div>
          <h2 class="center">Industrie</h2>
        </div>

        <div class="col-md-4 mb-4 aktion-text">
          <h2></h2>
          <div class="hovereffect">
            <img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
          </div>
          <h2 class="center">Industrie</h2>
        </div>

        
      </div>
      <div class="d-flex justify-content-center">
      <button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
      </div>
      
      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

标签： javascripthtmlcss

javascript - 折叠后自动滚动

问题描述

解决方案

推荐阅读