Question

我目前正在设置我的主页，并且正在制作一些可折叠的框，以使结构更好。可折叠框是使用纯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-element”以实现这种平滑性：

...

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

有人知道，我该如何解决？

使用jquery和$（'div'）。css放大div的高度：过渡不起作用

0 个答案: