高度自动 - 调整浏览器大小时显示隐藏内容

Posted 2023-05-08

【中文标题】高度自动 - 调整浏览器大小时显示隐藏内容

【英文标题】：Height auto - displaying hidden content when the browser is resized

【发布时间】：2012-06-12 00:19:36

【问题描述】：

这是我正在开发的网站，如果我不够具体，请原谅我，我是新手。

http://daniel.grocock.me/portnew

为#introexpand div 设置段落高度并具有调整大小的功能 当浏览器调整大小时，检查#introexpand 是否需要适应更大或更小的区域。

function resize() 
    $("#introexpand").css("height", "auto").show();
    var pHeight = $("#introexpand p:first").height() + 15;
    $("#introexpand").css("height", pHeight);

所以我在重置高度之前将 pHeight 设置为自动并显示一秒钟以便获得正确的高度。

现在的问题是，当我调整浏览器大小时，#introexpand div 在单击链接 span.learnmore 之前弹出。

如果我从 CSS 中删除自动高度，它似乎可以修复它，但是单击时会出现 #introexpand div 剂量函数。

【问题讨论】：

这个函数是否在$(window).resize()内部运行？

@KevinB 是的，它调用了 $.(document.ready)

感谢@Wes，这是我学习的唯一方法；）

【参考方案1】：

您可以让此函数在 onresize-handler (jQuery) 中运行，但使用 CSS 解决起来更简单：

#introexpand 
    padding-bottom: 15px;

【讨论】：

我尝试调整 CSS 但不满意 - 还是我错过了其他东西？

【参考方案2】：

为什么不以不同的方式处理这个问题。与其尝试计算#introexpand 需要的高度，不如让它始终为自动，当您点击span.learnmore 时只需切换display:none;。

为此，您需要从#introexpand 中删除position:relative，并从#introexpand p 中删除position:absolute。

完成此操作后，只需将 #introexpand 默认设置为 display:none，然后将 click span.learnmore 设置为 .show() div 或 .slideToggle() 即可。

我只是认为你试图让它变得比它需要的更复杂。