Jquery -如何检测元素是否被溢出隐藏:隐藏；容器？

Question

我有这个问题，而且我还处于概念层面的理解上，我们如何检测给定的元素是否在容器之外(一个带有overflow的容器:隐藏；属性声明)；

下面是我们想要的上下文：

让我们想象一下，我们正在鼠标悬停项目3：

我们通常有：

item 1
item 2
item 3 - sub 3.1
       - sub 3.2

像这样，sub 3.2将在流之外不可见，或者(如果我们在容器上使用clearfix而不是overflow)，它将下拉到其他页面内容上)，为了解决这个问题，我们认为这是一个更好的解决方案，同样，假设我们鼠标悬停在第3项：

item 1
item 2 - sub 3.1
item 3 - sub 3.2

为了做到这一点，也许我们应该检测元素是否在流之外，如果它是他的，则将所有的东西向上推X px；

如果这是解决这个问题的一个很好的方法，我们如何检测一个元素是否在流之外呢？

如果这不是一个好的方法，你能推荐另一个方法吗？

ps-我们使用superfish作为jquery菜单解决方案。

Answer 1

我可能有一个快速的jQuery解决方案，你的问题是这样标记的，如果你需要纯的CSS解决方案或者我拿错了插件，我们可以想出其他的办法……我自己从来没有用过superfish，但我从这个网站上查看了“垂直风格”的例子：http://users.tpg.com.au/j_birch/plugins/superfish/

那么，当你将鼠标移到项目3上时，你想看到项目1的子项目3.1吗？看了一下这个插件的代码后，我相信你只需要修改showSuperfishUl()就可以了，它的结尾是这样的：

.find('>ul:hidden').css('visibility','visible');

假设您的项目和subs的高度相同，并将上下文替换为$(this)，您可以添加类似以下行的内容：

if($(this).parent().nextAll().length < $(this).children("li").length) // lower space < subs heights ?
{
    var totalHeight=0;
    $(this).parent().prevAll().each(function(index)
    {
        if(index < $(this).children("li").length) // without this you would have all subs at the level of item 1
        {
            totalHeight += $(this).outerHeight(true); // true for margins
        }
    });
    ... .css("top","-"+totalHeight+"px");
}

你需要设置一个真实的页面，以确定它是否在真实的上下文中工作……"top“可能不适用于这个relative/float:left布局，但在你的”概念层“中差不多就是这样了。

Answer 2

如果你只是想像你所描述的那样显示所有东西，你可以用css的position:relative和align:bottom来实现，或者用bottom:?px的position:absolute来实现，但是你不得不担心事情会变得更糟。