jQuery折叠/展开需要计算高度

Question

我想我快到了，我只需要计算隐藏子项的高度并将其应用于div。

我可能需要编写一个根据子代的高度动态变化的函数。

在演示中，单击“展开/折叠”图像。

点击展开

var currentHeight = $('.Tile.is-expanded .Tile-flyout').outerHeight();

 TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { height:0, autoAlpha:0,   ease: Linear.easeNone }, { height:currentHeight, autoAlpha:1,});
 TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, {height:0, ease: Linear.easeNone }, {height:"auto"});

单击崩溃

var currentHeightOpen = $('.Tile .Tile-flyout').outerHeight();

  TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { height:currentHeightOpen, autoAlpha:1, ease: Linear.easeNone }, {height:0, autoAlpha:0,});
  TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { height:"auto",  ease: Linear.easeNone }, {height:0,});

在这里演示，您需要将其分叉

Answer 1

这是一支代码笔，其中包含如何处理我对您的主要帖子的评论：

https://codepen.io/anon/pen/mqLREK?editors=0010

function(code){ //Ignore this, I apparently need code to link codepen
    //code code
}

您会注意到，在展开中，我抓取了将展开并显示的所有子元素的列表，然后循环浏览，每3个元素我将单元格高度添加到项目的运行高度（因为每行3个）。

请注意，如果每行可以大于或小于3，则可能需要执行一些操作来确定这一点并相应地调整循环增量