7

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

这是我们想要的上下文：

让我们想象一下我们是鼠标悬停项目 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 菜单解决方案。

4

2 回答 2

1

我可能有一个快速的 jQuery 解决方案，你的问题就是这样标记的，如果你需要纯 CSS 解决方案或者我使用了错误的插件，我们可以考虑别的东西......我自己从未使用过 superfish，但我检查了“垂直样式”此站点的示例：http: //users.tpg.com.au/j_birch/plugins/superfish/

那么，当您将鼠标悬停在项目 3 上时，您希望在项目 1 的级别上看到 sub 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");
}

您需要设置一个真实页面来确定它是否在真实上下文中工作......“顶部”可能不适用于这种相对/浮动：左布局，但在您的“概念级别”中几乎就是这样。

于 2012-08-10T09:41:18.270 回答
0

如果您只是希望显示您所描述的所有内容，您可以使用带有 a 的 css 或使用 css 来做到这一点，position:relative但是align:bottom您position:absolute将bottom:?px不得不担心事情会变得很远。

于 2012-01-11T18:33:28.753 回答