Bootstrap Свернуть не показывать, если находится под экраном окна - PullRequest
Новая
       16

Bootstrap Свернуть не показывать, если находится под экраном окна

0 голосов
/ 11 марта 2020

Я только что нашел эту маленькую проблему, но решение ускользает из моего пальца. У меня свернута страница с несколькими разделами, которую я хочу показать при нажатии правой кнопки.

Теперь все работает идеально, соответственно Bootstrap и является Js библиотекой, но я заметил, что когда ваш экран недостаточно велик, вы не видите, что div расширен / показывает.

Ниже простой код из школы w3 c, который должен работать для этого примера. 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Collaps 1</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
  <div id="demo1" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <h2>Collaps 2</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo2">Simple collapsible</button>
  <div id="demo2" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <h2>Collaps 3</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo3">Simple collapsible</button>
  <div id="demo3" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  
</div>

</body>
</html>

Я также пытался работать с некоторой js функцией, которая подразумевает scrollTop, например 

$('html,body').animate({scrollTop: $('#demo3).offset().top -200}, 500);

, но она не работала.

1 Ответ

0 голосов
/ 11 марта 2020

Как уже упоминалось в Bootstrap документации свертывания , вы можете использовать Bootstrap событие свертывания для прокрутки страницы при расширении div.

JSFiddle: https://jsfiddle.net/35oz96qe/ 

$(function() {
  $('#demo3').on('shown.bs.collapse', function() {
    $('html,body').animate({
      scrollTop: $('#demo3').offset().top - 200
    }, 500);
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Collaps 1</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
    <div id="demo1" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <h2>Collaps 2</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo2">Simple collapsible</button>
    <div id="demo2" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <h2>Collaps 3</h2>
    <p>Click on the button to toggle between showing and hiding content.</p>
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo3">Simple collapsible</button>
    <div id="demo3" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

  </div>

</body>

</html>
...