在特定点显示 div（下拉菜单样式），跨浏览器，跨分辨率

Question

我正在尝试制作一个 div 的“下拉”菜单样式。当按下按钮时，div 将出现在其正下方的位置。

这是一个来自谷歌翻译的例子：

这是一个 div，它正好位于按钮下方，使用左右键。

如果不准确指定左右，你怎么能做到这一点，因为我不知道用户的屏幕尺寸。这也必须是跨浏览器。

这是我目前拥有的： http://jsfiddle.net/pCg9N/

Answer 1

你可以这样做：

$(document).ready( function() {
    // So that we don't have jQuery search every time.
    var $button = $("button");

    // Button's left offset, relative to the document.
    var buttonLeft = $button.offset().left;
    // Button's right offset, relative to the document.
    var buttonTop = $button.offset().top;
    // innerHeight() includes CSS padding.
    var buttonHeight = $button.innerHeight();

    // Finally, set the div's left and top CSS attributes.
    $("div").css("left", buttonLeft + "px");
    $("div").css("top", buttonTop + buttonHeight + "px");
});

$('button').on('click', function () {
    // I changed this to toggle() so that it hides again if clicking twice ;-)
    $('div').toggle();
});

现在它基本上利用了按钮的定位信息，因此您不必在 div 上设置它。这应该会有所帮助，但不幸的是，跨浏览器支持并不一定这么简单。

我还在您的示例中稍微更改了 CSS，以更好地说明我们正在做什么，请参阅下面的更新版本以了解完整内容：

http://jsfiddle.net/pCg9N/15/

相关jQuery函数文档的链接：

• offset()
• css()
• innerHeight()
• toggle()