0

我遇到了一个有趣的问题。我有一个div围绕菜单的容器。

如果我overflow : hidden在菜单上设置，菜单溢出的部分将被隐藏。

我不想隐藏它们，而是简单地调整“组列表”菜单弹出按钮的大小，以便它留在我的菜单中。

这是一个小提琴：http: //jsfiddle.net/uW9nG/

在小提琴中，您会看到，如果您将鼠标悬停在A上，它会飞出蓝色容器。如果您切换溢出，溢出将被隐藏。

如何使溢出简单地调整组列表的大小以使其适合容器？

（我整个早上都在研究这个数学，但不太明白..）

4

2 回答 2

1

我分叉了你的小提琴并想出了一个解决方案。只需找到容器和弹出窗口的顶部位置，然后找到差异并将弹出窗口与该值相对定位。我还必须将列表项的高度更改为 20px 硬编码，否则列表项会改变宽度。

var groupListTop = groupList.offset().top;
var containerTop = $('#container').offset().top;
if(groupListTop < containerTop) {
    var diff = containerTop - groupListTop;
    groupList.css({
        position: 'relative',
        top: diff
    })
}
于 2012-10-30T21:58:49.430 回答
1

您groupList目前正在获得一个margin-top，但制作它position:absolute然后将其拉上 -50px 会更简单（以匹配您<ul id='test-two'>向下推的 50px。参见小提琴。

groupList.css({
    'top': '-50px',
    'position': 'absolute'
});

如果你#test-two没有定位，你可以给groupList0px 的top.

于 2012-10-30T22:08:06.410 回答