我正在开发一个要求用户可以单击按钮的界面,然后我将显示一个相对于按钮定位的浮动 div(您可以将其视为单击向下箭头时显示的区域下拉菜单)。
如何正确定位此浮动元素与单击的按钮相邻(可能位于页面上的任何位置)?
提前致谢!!
我正在开发一个要求用户可以单击按钮的界面,然后我将显示一个相对于按钮定位的浮动 div(您可以将其视为单击向下箭头时显示的区域下拉菜单)。
如何正确定位此浮动元素与单击的按钮相邻(可能位于页面上的任何位置)?
提前致谢!!
例如:
$("#myButton").click(function() {
var o = $(this).offset();
$("#myDiv").css({'position': 'absolute','left':o.left,'top',o.top});
});
这会将它定位在按钮的正上方,只需将左/上调整到您希望它去的任何位置。
例如,将其放在按钮下方,将顶部更改为按钮的'top': o.top + $(this).height()
右侧或右侧:'left':o.left + $(this).width()
<input type="button" id="btn" value="Choose Something" />
<div id="select">
...
</div>
使用 CSS:
#select { position: absolute; display: none; }
和 Javascript:
$("#btn").click(function() {
var sel = $("#select");
var pos = $("#btn").offset();
if (sel.is(":hidden")) {
sel.attr({
top: pos.top + 20,
left: pos.left
});
sel.show();
} else {
sel.hide();
}
});
基本上,您绝对定位浮动 div 以将其从正常流程中移除,然后用于offset()
确定将其放置在相对于按钮的位置。
您应该使用 .offset() 获取和设置位置,以防元素分层定位。
例如2
<input type="button" id="myButton" value="Choose Something"
style="position: absolute; top: 100px;" />
<div style="position: absolute; top: 200px;">parent div
<div id="myDiv" style="position: absolute; top: 20px;">child div</div>
</div>
$("#myButton").click(function () {
var o = $(this).offset();
$("#myDiv").offset({
'left': o.left,
'top': o.top - 20
});
});
这是一个小提琴:http: //jsfiddle.net/R5YM6/1/