jQuery animate() 元素高度和动态内容说明

Question

当一个部分具有子部分时，打开时为所有子部分设置主部分高度，但它们在页面加载时折叠。

我不是数学(计算障碍(的佼佼者，我对如何动态地解释哪些子菜单是打开或关闭的，并保持主块相对于它们的高度感到困惑。

https://jsfiddle.net/WASasquatch/2ksy68zq/

$(document).ready(function () {
var linkblocks = $(".entry-content").children("#links-toggle-block");
var colHeight = 70;
linkblocks.each(function(id) {
var blk = $(this);
var subBlocks = blk.children("#links-sub-block");
var blkHeight = blk.outerHeight();
var header = blk.find(".links-toggle-header").first();
if(!(blk.hasClass("toggleBlk"))) {
blk.css({"height": colHeight+"px"}).addClass("toggleBlk");
header.find(".links-icon").html("expand_more");
}
header.click(function(e) {
e.preventDefault();
if(blk.hasClass("toggleBlk")) {
blk.animate({"height": blkHeight+"px"}).removeClass("toggleBlk");
header.find(".links-icon").html("expand_less");
} else {
blk.animate({"height": colHeight+"px"}).addClass("toggleBlk");
header.find(".links-icon").html("expand_more");
}
});
if(subBlocks.length > 0)
subBlocks.each(function(id) {
var sub = $(this);
var subHeight = sub.outerHeight();
var subHead = sub.find(".links-sub-header").first();
if(!(sub.hasClass("toggleSub"))) {
sub.css({"height": colHeight+"px"}).addClass("toggleSub");
subHead.find(".links-icon").html("expand_more");
}
subHead.click(function(e) {
e.preventDefault();
if(sub.hasClass("toggleSub")) {
sub.animate({"height": subHeight+"px"}).removeClass("toggleSub");
subHead.find(".links-icon").html("expand_less");
} else {
sub.animate({"height": colHeight+"px"}).addClass("toggleSub");
subHead.find(".links-icon").html("expand_more");
}
});
});
});
});

Answer 1

我想通了，不需要计算太多。

基本上我只是抓住内部内容减去标题的高度

blkSubHeight = (blkSubHeight + (subHeight - colHeight));

而不是从隐藏的可见性动态切换到可见。

我认为这是最好的方法，尽管我可能是错的？

https://jsfiddle.net/WASasquatch/sqgr0beL/

$(document).ready(function () {
var linkblocks = $(".entry-content").children("#links-toggle-block");
var colHeight = 70;
linkblocks.each(function(id) {
var blk = $(this);
var blkSubHeight = 0;
var subBlocks = blk.children("#links-sub-block");
var blkHeight = blk.outerHeight();
var header = blk.find(".links-toggle-header").first();
if(!(blk.hasClass("toggleBlk"))) {
blk.css({"height": colHeight+"px"}).addClass("toggleBlk");
header.find(".links-icon").html("expand_more");
}
header.click(function(e) {
e.preventDefault();
if(blk.hasClass("toggleBlk")) {
if(subBlocks.length > 0) {
blk.animate({"height": blkHeight - blkSubHeight+"px"})
.removeClass("toggleBlk");
} else {
blk.animate({"height": blkHeight+"px"})
.removeClass("toggleBlk");
}
header.find(".links-icon").html("expand_less");
} else {
if(subBlocks.length > 0) {
blk.css({"overflow": "hidden"});
}
blk.animate({"height": colHeight+"px"})
.addClass("toggleBlk");
header.find(".links-icon").html("expand_more");
}
});
if(subBlocks.length > 0)
subBlocks.each(function(id) {
var sub = $(this);
var subHeight = sub.outerHeight();
blkSubHeight = (blkSubHeight + (subHeight - colHeight));
var subHead = sub.find(".links-sub-header").first();
if(!(sub.hasClass("toggleSub"))) {
sub.css({"height": colHeight+"px"}).addClass("toggleSub");
subHead.find(".links-icon").html("expand_more");
}
subHead.click(function(e) {
e.preventDefault();
blk.css({"overflow": "visible", "height": "auto"});
if(sub.hasClass("toggleSub")) {
sub.animate({"height": subHeight+"px"})
.removeClass("toggleSub");
subHead.find(".links-icon").html("expand_less");
} else {
sub.animate({"height": colHeight+"px"})
.addClass("toggleSub");
subHead.find(".links-icon").html("expand_more");
}
});
});
});
});