Блог

Главная - Вопросы по программированию - Увеличить высоту div с помощью jquery и $ (‘div’).css: переход не работает

Увеличить высоту div с помощью jquery и $ (‘div’).css: переход не работает

#javascript #jquery #html #css #transition

#javascript #jquery #HTML #css #переход

Вопрос:

В настоящее время я настраиваю свою домашнюю страницу и делаю несколько разборных блоков для лучшей структуры. Сворачиваемые блоки были созданы с использованием чистого CSS и HTML, но при активации сворачиваемого элемента (очевидно) div-элемент, где находится сворачиваемый, также должен быть увеличен (изменение высоты).

Чтобы достичь этого, я использую jquery и придумал следующее (это просто быстрый / маленький пример для демонстрации проблемы):

 $(function() {

  var height_content = $("#content").height();

  $('#btn').click(function() {
    if ($(this).is(':checked')) {

      $('#content').css({
        'height': height_content   700   'px',
      });

      height_content = $("#content").height();
      console.log(height_content);
    } else {

      $('#content').css({
        'height': height_content - 700   'px',
      });

      height_content = $("#content").height();
      console.log(height_content);
    };
  });
});  
 <!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    #content {
      border: 1px solid red;
      height: 200px;
      width: 200px;
      margin-left: auto;
      margin-right: auto
    }
    
    #footer {
      border: 1px solid green;
      height: 50px;
      width: 200px;
      margin-left: auto;
      margin-right: auto
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

  <div id="content">
    <br><br><br><br><br><br><br><br>
    <input id="btn" type="checkbox">
  </div>

  <div id="footer">
    <p>Footnote</p>
  </div>

</body>

</html>

И это работает, когда я нажимаю на флажок, содержимое div увеличивается. Теперь, поскольку это выглядело очень статично, я решил включить элемент `transition-для плавности, подобный этому:

 ...

if($(this).is(':checked')) {
$('#content').css({
   'height': height_content   700   'px',
   'transition': 'height 0.5s'
 });

 ...

 else {
 $('#content').css({
    'height': height_content - 700   'px',
    'transition': 'height 0.5s'
 });

 ...

Но теперь элемент высоты играет странно и расширяет его до разных ложных размеров. Журнал правильного процесса с возможностью расширения выглядит следующим образом:

 test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200
test.html:26 900
test.html:36 200

С помощью опции перехода я получаю этот журнал:

 test.html:26 200
test.html:36 900
test.html:26 0
test.html:36 1600
test.html:26 0
test.html:36 2300
test.html:26 0.484375
test.html:36 2995.36
test.html:26 4.60938
test.html:36 3695.36
test.html:26 0
test.html:36 4388.78
test.html:26 0
test.html:36 5087.64
test.html:26 0
test.html:36 5786.27
test.html:26 0
test.html:36 6486.27
test.html:26 0
test.html:36 7186.27
test.html:26 10.4062
test.html:36 7886.27
test.html:26 0

Есть ли у кого-нибудь идея, как я могу это исправить?

Комментарии:

1. Да, в вашем else у вас все еще добавляется высота 'height': height_content 700 'px', Кроме того, я не знаю, почему вы добавляете переход в свой JS, когда вы можете поместить его в свой CSS как transition: height .5s ease; в #content div

2. о, блин, это была орфографическая ошибка в else , конечно, есть - , просто исправил это. Я попробую добавить идентификатор непосредственно в CSS, не подумал об этом, спасибо за предложение! редактировать: ввод transition непосредственно в CSS #content дает тот же результат..

3. Если вы посмотрите на плохой результат, вы увидите, что он добавляет 700 пикселей каждый раз, когда вы нажимаете на него.