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{
}

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

Answer 1

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

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