Question

我有一个元素需要根据子p标签的高度来改变高度：

<div id="eventpg" class="bg-pink linkbox">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</p>
</div>

如果段落超过某个高度，我通过添加一个类来实现所需的更改：

var divheight = $("#eventpg p").height();
if ( divheight > 173) {
    $("#eventpg").addClass("height535");
}

这个类增加了这个类：

. height535{height:535px;}

这在大多数情况下都可以正常工作，但如果用户将其设备从纵向旋转到横向，则仍会保留添加的类，并且必须重新加载页面才能将其删除。

我如何实现“飞行中”的高度变化？因此，如果浏览器窗口更改导致段落更改高度，容器会更改以反映此情况吗？

由于

Answer 1

您应该可以在resize和$(window).on('load resize', function() { var divheight = $("#eventpg p").height(); if ( divheight > 173) { $("#eventpg").addClass("height535"); } })'上运行该功能：

{{1}}

Answer 2

您可以监听调整大小事件，根据需要添加或删除该类：

*finger

或做类似的事情，例如jQuery Mobile的var heightThreshold = 173; // controlling the height globally may be easier $(window).resize(function () { var el = $("#eventpg"), divheight = el.find("p").height(); if ( divheight > heightThreshold ) { el.addClass("height535"); } else { el.removeClass("height535"); } });事件 - 请参阅here

Answer 3

感谢您的帮助。使用The One and Only ChemistryBlob和Derek Story的答案的组合，以下成功地工作：

$(window).on('load resize', function() {
    var divheight = $("#eventpg p").height();
    if ( divheight > 173) {
        $("#eventpg").addClass("height535");
    } else {
        $("#eventpg").removeClass("height535");
    }
});

根据元素高度添加/删除类

3 个答案: