Jquery - 如何检测元素是否因溢出而隐藏 :hidden; container?

Question

我遇到了这个问题，但我还处于概念层面的理解，我们如何检测给定元素是否在容器之外(声明了 Overflow:hidden; 属性的容器)；

这是我们想要的上下文:

让我们想象一下鼠标悬停在第 3 项上:

我们通常有:

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

像这样，sub 3.2将脱离流程并且不可见，或者(如果我们在容器上使用clearfix而不是溢出)，它将落到其他页面内容上)，为了解决这个问题，我们再次认为这是一个更好的解决方案，假设我们将鼠标悬停在第 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');

假设您的项目和子项目高度相同，并用 $(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布局，但在您的“概念级别”中几乎就是这样。