Question

Sub Block Toggle的父级具有可变高度。当单击Sub Block Toggle时，Lorem Ipsum块应根据左侧的高度缩小和扩展。

子块不能具有背景颜色，因此它不是Lorem Ipsum与Sub Block背景的简单重叠。

这让我得到了Lorem Impsum文本高度的动画，但由于Sub Block的高度是可变的，并且onload设置为隐藏，我无法使用scrollHeight。

这里有人能指出我正确的方向吗？

非常感谢。

＆＃13;

$('.footer-subblock-title').on('click', function(el) {
  console.log('clicked');
  $(this).next().animate({
    height: ["toggle", "swing"]
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.body {
  width: 500px;
  height: 800px;
  background: #bae0c4;
  position: relative;
  font: 14px/1.65em Arial;
}
.body .container {
  top: 30px;
  position: absolute;
  left: 20%;
  width: 80%;
}
.body .container .footer-block {
  border: 2px solid #000;
  bottom: -40px;
  position: absolute;
  left: 0;
  width: 100%;
}
.body .container .footer-subblock {
  overflow: hidden;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="body">
  <div class="container">
    <h3 class="title">
      Title Goes Here
    </h3>
    <div class="text">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <div class="footer-block">
      <h4 class="footer-subblock-title">
        Sub Block Toggle  
      </h4>
      <div class="footer-subblock" style="display:none;">
        Lorem Ipsum is simply dummy text
        <br/>Lorem Ipsum is simply dummy text
        <br/>Lorem Ipsum is simply dummy text
      </div>
    </div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/32dk3txg/

Answer 1

我设法用一点点jQuery做到了。查看CODEPEN中的一个工作示例。由于您的HTMl标记有一些不必要的div的问题，我使它更简单，但解决方案的原则也适用于您的代码：

<强> JS

$(document).ready(function() {
  var origMaxHeight = $(".sub-block").css("max-height");
  var newHeight = $(".sub-block").height();

  $(".sub-block").click(function() {

    if ($(this).css("max-height") == origMaxHeight) {
       $(this).stop(true,true).animate({
         maxHeight: "10em"
       }, {
         duration: 500,
         queue: false,
         progress: function() {
            $(".text").height($(".text").height() - $(this).height() + newHeight); 
            newHeight =  $(this).height(); 
         }
       });


     } else {
       $(this).stop(true,true).animate({
         maxHeight: "1em"
       }, {
         duration: 500,
         queue: false,
         progress: function() {
            $(".text").height($(".text").height() - $(this).height() + newHeight); 
            newHeight =  $(this).height(); 
         }
       });
     }
  })
});

我们的想法是在progress函数上使用animate回调来修改每个步骤中text元素的高度。 $(this).css("max-height")上的if语句将使我们能够区分第一次单击（增加.sub-block高度）与第二次单击（以某种方式关闭.sub-block元素）。其余的非常直截了当。希望现在还为时不晚：）

根据元素的动画高度

1 个答案: