我有一个隐藏的DIV,它包含一个类似工具栏的菜单
我有很多DIV,当鼠标悬停在它们上面时,它们可以显示菜单DIV
是否有一个内置函数将菜单DIV移动到活动(鼠标悬停)DIV的右上角?我正在寻找类似于$(菜单)的东西
tl;dr:(在此处尝试)
如果您有以下HTML:
<;div id=“menu”style=“display:none;”gt;
<;!--这里的菜单内容-->;
<;ul>&书信电报;李>;菜单项</李></ul>;
</部门>;
<;div class=“parent”>;将鼠标悬停在我上方,在此处显示菜单</部门>;
然后可以使用以下JavaScript代码:
$(.parent”).mouseover(函数(){
//.position()使用相对于偏移父对象的位置,
var pos=$(this.position();
//.outerWidth()考虑了边框和填充。
var width=$(this.outerWidth();
//直接在占位符上显示菜单
$(“#菜单”).css({
位置:“绝对”,
顶部:位置顶部+“px”,
左:(位置左+宽度)+“px”
}).show();
});
但它不起作用
只要菜单和占位符具有相同的偏移父项,这将起作用。如果没有,并且您没有嵌套的CSS规则来关心#菜单元素在DOM中的位置,请使用:
$(this).append($(“#菜单”);
就在定位#菜单元素的行之前
但它仍然不起作用
您可能有一些奇怪的布局,与此方法不兼容。在这种情况下,只需使用jQuery.ui的position插件(如下面的答案所述),它可以处理所有可能发生的情况。注意,在调用position({…})之前,必须show()菜单元素;插件无法定位隐藏元素
三年后的2012年更新注释:
(原始解决方案存档于此,以供后人使用)
所以,原来我在这里使用的原始方法远非理想。特别是,如果:
- 菜单的偏移父项不是占位符的偏移父项
- 占位符有边框/填充
幸运的是,jQuery早在1.2.6中就引入了方法(position()和outerWidth()),这使得在后一种情况下更容易找到正确的值。对于前一种情况,append将菜单元素添加到占位符中起作用(但会破坏基于嵌套的CSS规则)