隐藏< li>元素不完全可见 [英] Hide <li> element when not fully visible

问题描述

基本：我有一个无序列表与许多listitem（包含图片和标题）。不知道标题多长，我不知道每个listitem的高度。在这个列表的左边是一个大图片，标题为设置我的列表的高度（取决于标题的高度和长度）。

Basic: I have an unordered list with many listitems (containing a picture and title). Not knowing how long the title will be I don't know the hight of each listitem. To the left of this list is a big picture with title that "sets" the hight of my list (depending of the height en length of the title).

尝试做：当我的列表的最后一个listitem无法完全显示，隐藏整个listitem。

What I try to do: When the last listitem of my list can't be fully displayed, hide the whole listitem.

示例： http://d.pr/eAlK & http://d.pr/8MVO

在第二个例子第四篇文章是隐藏的，因为它不会完全可见。

In the second example the 4th article is hidden because it wouldn't be fully visible.

这是可能吗？我喜欢我干净的工作crossbrowser如果可能...

Is this possible? I prefer I clean way that works crossbrowser if possible...

推荐答案

基本上，想法是计算所有的子元素的高度并与最大允许高度进行比较。

Basically the idea is to calculate all the height of child elements together and compare with maximum allowed height.

var neededHeight = $("#lhscontainer").outerHeight(); //you can also use static value 
var totalChildHeight = 0;
$("ul").children("li").each(function() {
    totalChildHeight+= $(this).outerHeight(); //add up to the total height 
    if(totalChildHeight> neededHeight) {  //compare if the height limit was exceeded
       $(this).hide(); // if it did, hide the current element
       $(this).nextAll().hide(); //hide all other list also
       return false; // break the loop to stop the further iteration
    }
});

这篇关于隐藏< li>元素不完全可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！