Question

我有这个问题而且我还处于理解的概念层面，我们如何检测给定元素是否在容器外（一个容器有溢出：隐藏;属性声明）;

以下是我们想要的背景：

让我们的图像是鼠标悬停项目3：

我们通常有：

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

像这样，子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解决方案或我采取了错误的插件，我们可以想到别的... 从来没有使用过超级鱼，但我查看了这个网站的“垂直样式”示例：http://users.tpg.com.au/j_birch/plugins/superfish/

那么，当你将鼠标移到第3项时，你想在第1项的级别看到子3.1？在快速浏览一下这个插件的代码后，我相信你只需要修改showSuperfishUl（），它有一行结尾如下：

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

假设你的items和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”可能不适用于这种相对/浮动：左侧布局，但在你的“概念级别”几乎就是它。

Answer 2

如果您只想按照自己的描述展示所有内容，可以使用position:relative和align:bottom或position:absolute与bottom:?px的css进行展示，但是您可以担心事情会发生很大的变化。

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

2 个答案: