在特定点显示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()