我有一个隐藏的DIV,其中包含一个类似工具栏的菜单。
我有许多DIV,当鼠标悬停在它们上面时,它们可以显示菜单DIV。
是否有一个内置函数,将菜单DIV移动到活动(鼠标悬停)DIV的右上方?我在找像$(menu)这样的东西。位置(“topright targetEl);
我有一个隐藏的DIV,其中包含一个类似工具栏的菜单。
我有许多DIV,当鼠标悬停在它们上面时,它们可以显示菜单DIV。
是否有一个内置函数,将菜单DIV移动到活动(鼠标悬停)DIV的右上方?我在找像$(menu)这样的东西。位置(“topright targetEl);
当前回答
像这样的东西?
$(menu).css("top", targetE1.y + "px");
$(menu).css("left", targetE1.x - widthOfMenu + "px");
其他回答
像这样的东西?
$(menu).css("top", targetE1.y + "px");
$(menu).css("left", targetE1.x - widthOfMenu + "px");
为什么这么复杂?解决方法很简单
css:
.active-div{
position:relative;
}
.menu-div{
position:absolute;
top:0;
right:0;
display:none;
}
jquery:
$(function(){
$(".active-div").hover(function(){
$(".menu-div").prependTo(".active-div").show();
},function(){$(".menu-div").hide();
})
即使,
其他任何地方都有两个div 浏览器调整大小
这就是最后对我有用的方法。
var showMenu = function(el, menu) {
//get the position of the placeholder element
var pos = $(el).offset();
var eWidth = $(el).outerWidth();
var mWidth = $(menu).outerWidth();
var left = (pos.left + eWidth - mWidth) + "px";
var top = 3+pos.top + "px";
//show the menu directly over the placeholder
$(menu).css( {
position: 'absolute',
zIndex: 5000,
left: left,
top: top
} );
$(menu).hide().fadeIn();
};
这是我写的一个jQuery函数,它可以帮助我定位元素。
下面是一个用法示例:
$(document).ready(function() {
$('#el1').position('#el2', {
anchor: ['br', 'tr'],
offset: [-5, 5]
});
});
上面的代码将#el1的右下与#el2的右上对齐。['cc', 'cc']将#el1置于#el2的中间。确保#el1具有position: absolute和z-index: 10000(或一些非常大的数字)的css来保持它在顶部。
偏移选项允许您将坐标微调到指定的像素数。
源代码如下:
jQuery.fn.getBox = function() {
return {
left: $(this).offset().left,
top: $(this).offset().top,
width: $(this).outerWidth(),
height: $(this).outerHeight()
};
}
jQuery.fn.position = function(target, options) {
var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
var defaults = {
anchor: ['tl', 'tl'],
animate: false,
offset: [0, 0]
};
options = $.extend(defaults, options);
var targetBox = $(target).getBox();
var sourceBox = $(this).getBox();
//origin is at the top-left of the target element
var left = targetBox.left;
var top = targetBox.top;
//alignment with respect to source
top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;
//alignment with respect to target
top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;
//add offset to final coordinates
left += options.offset[0];
top += options.offset[1];
$(this).css({
left: left + 'px',
top: top + 'px'
});
}
注意:这需要jQuery UI(不仅仅是jQuery)。
你现在可以使用:
$("#my_div").position({
my: "left top",
at: "left bottom",
of: this, // or $("#otherdiv")
collision: "fit"
});
用于快速定位(jQuery UI/Position)。
你可以在这里下载jQuery UI。