我正在尝试制作与div相关的响应式菜单,正如您在我的jsfiddle演示链接中看到的那样, 我的问题与箭头和菜单位置,我需要添加类,如果菜单最接近容器的右边框,甚至到左边框或顶部边框或底部边框,我的意思是改变菜单的位置和更改箭头位置,也使菜单永远不会走出集装箱..
这是我的代码:
var popupid,gid = 0;
$(".box").on("click",function(e){
e.preventDefault();
placeholder();
var self = $(this),
pos = self.position(),
selftop = pos.top,
selfleft = pos.left,
width = self.outerWidth(),
popup_Options = self.find(".popup");
popupid = 'placeholder-' + gid++;
popup_Options
.attr('placeholder', popupid)
.before('<div class="placeholder ' + popupid + '"></div>')
.appendTo('.Container');
popup_Options.css({
position: "absolute",
top: selftop + "px",
left: (selfleft + width) + 20 +"px"
}).show();
e.stopPropagation();
});
$('html').on('click',function(e)
{
placeholder();
});
function placeholder()
{
// Move back out of container
$('div[placeholder="'+popupid+'"]')
.appendTo('.placeholder.' + popupid)
.unwrap()
.removeAttr('placeholder')
.hide(); // Unset placeholder data
}