jquery - facebook风格的下拉菜单

Question

我正在尝试使用此下拉菜单:http://ttb.li/dump/buttons/dropdown.html

在我的网站上，这看起来很好并且可以正常工作，但是打开的窗口放置在不正确的高度并且非常靠右(在我的网站上)。在 jsfiddle 上它只是放得太高了，但至少水平是正确的。

代码:http://jsfiddle.net/EA6LS/1/

我从网站的演示中复制并粘贴来制作这个，我看不到任何我可能遗漏的东西......感谢想法。

更新

好吧，我刚刚想到了什么。在我的站点上，我将页面宽度定义为 900px。如果我在 firefox 上使用“inspect”，我可以看到 JS 正在为下拉菜单分配 215px(给予或接受)左边距。这在我的屏幕上可能是准确的。但是，它将元素移动到我定义的 900px 区域的左侧，而不是在我的屏幕上......这可能是relative 与 absolute 的问题吗？

Answer 1

您可以删除定位下拉菜单的 JavaScript 代码，而只在 CSS 中定义它。如果您相对定位 .dropdown，.dropdown_content 将相对于其父级定位，这使得定位变得容易:

.dropdown {
    ...
    position: relative;
}
.dropdown .dropdown_content {
    ...
    top: 100%;
    left: 0;
    margin: 5px 0;
}

删除这些 JavaScript 行:

var o = $(this).parent().find('.dropdown_button').offset();
var h = $(this).parent().find('.dropdown_button').height();
$(this).parent().find('.dropdown_content').css({'top':(o.top+h-1),'left':o.left});

(这是您的内联 top 和 left 值的来源。)

此外，从您的 body 样式定义中删除 overflow: hidden。

工作演示: http://jsfiddle.net/gilly3/EA6LS/2/

我通常也认为取消选中 jsfiddle 中的“规范化 CSS”是个好主意。在调试 CSS 时，这可能会导致困惑的结果。

当你在做的时候......JavaScript 可以被简化:http://jsfiddle.net/gilly3/EA6LS/4/