javascript - slideToggle 隐藏高度不为零

Question

我目前正在 jQuery 中获取#rightDesc 的高度并使用它来决定#rightHistory 的高度，这两个都是 div。

$('#rightHistory').height($('#rightMiddleCenter').innerHeight() - $('#rightDesc').outerHeight() - $('#rightDescToggle').outerHeight());

布局如下:

<div id="rightMiddleCenter">
    <div id="rightDesc">
    </div>
    <div id="rightDescToggle">
        Toggle Descriptions
    </div>
    <div id="rightHistory">
    </div>
</div>

CSS:

#rightMiddleCenter{
float:left;
height:100%;
width:260px;
}
#rightDesc{
padding:0 0 10px;
}
#rightDescToggle{
padding:5px 5px 5px 0;
cursor:pointer;
}
#rightHistory{
}

我现在决定使用 slideToggle 使 #rightDesc 可切换，但是当它被隐藏时，jQuery 仍然返回它的完整高度。这导致#rightHistory 的高度没有改变，也没有占用它应该占用的空间量。 谁能提出解决方案？任何帮助将不胜感激。

Answer 1

当您使用 visibility:hidden 或 display:none 隐藏元素的方式时，元素的高度和宽度不会改变，它只是不可见。

编辑: 我建议为您的特定操作使用自定义数据属性，并将这些属性用于您的高度宽度使用。或者只是构建您的计算有点不同，并检查元素是否可见，用 0 替换高度和宽度。