Question

基本上我有一个包含一些div的div列表，其中包含一些图像和文本

<div id='item-list' style="height: 700px; overflow: hidden">
    <div id='item-1' style="overflow: hidden"> *some images and texts* </div>
    <div id='item-2' style="overflow: hidden"> *some images and texts* </div>
    <div id='item-3' style="overflow: hidden"> *some images and texts* </div>
    ...
</div>

我的项目列表有一个我不想改变的静态高度。每当用户创建项目时，动态添加项目div，其中最新项目被预先添加到列表顶部。

我想在项目列表超过700px的高度时隐藏这些项目。我尝试使用溢出隐藏，但不是隐藏整个项目div，它裁剪项目，直到高度限制。

示例：现在我有10个带有图标和文本的项目，并且列表内容超出了高度，因此它不是隐藏项目-10的整个div，而是裁剪项目-10 div，我只能看到图标而不是文本。

如果我想要隐藏整个第10项，我该怎么办？请注意，每个项目都有不同的高度，这取决于用户在项目创建过程中键入的内容。

Answer 1

也许做一些jQuery来检查单个项目的高度。循环遍历所有项目并执行以下操作：

var $totalHeight = 0;
if( $("#item-x").height() + $totalHeight < 700) {
     $totalHeight += $("#item-x").height();
     $("#item-x").show();
} else {
     $("#item-x").hide();
}

基本上，您需要检查单个项目的高度，并查看添加下一个项目是否会超过700px。如果没有，则显示该项目，否则不显示。

如果您想获得幻想，可以使用jQuery完全删除<div>中超出您的身高限制的所有项目。

溢出时隐藏动态div

1 个答案: