Fiddle。在这个小提琴中,有两个下拉菜单。首先是“Categorieën”,第二个是“Contact”。分配给列表项的类确定悬停点上的箭头是向左还是向右(无论哪个空间剩余空间最多)。以下代码应该注意这一点。然而,正如您在小提琴中看到的那样,联系人下拉列表中的列表项指向错误的方向,它应该指向左侧。
$("ul.sub-menu > li:not(':last-child')").addClass(function () {
var $this = $(this),
offL = $this.offset().left,
wW = $(window).width();
if (offL > ((wW / 2) - $this.width())) {
return "over-left";
} else {
return "over-right";
}
});
我哪里出错了?
答案 0 :(得分:0)
由于未显示菜单行,$this.width()
始终等于0
且您的情况从未得到满足。
我在类归因循环之前添加了show()
,以检索函数中使用的右侧菜单宽度值。
// RELEVANT CDOE
$("ul.sub-menu > li:not(':last-child')").show().addClass(function () {
var $this = $(this),
offL = $this.offset().left,
wW = $(window).width();
console.log(offL + ' ' + (wW/2) + ' ' + $this.width())
if (offL >= ((wW / 2) - $this.width() - 238.5)) {
return "over-left";
} else {
return "over-right";
}
});
// /END RELEVANT CODE
答案 1 :(得分:0)
<强>解决方案强>:
// We need to briefly show the sub-menu to get its offset and width
$("ul.sub-menu").css({
visibility: "hidden",
display: 'block'});
$("ul.sub-menu > li:not(':last-child')").each(function () {
var $this = $(this);
$this.addClass(function () {
var offL = $this.offset().left,
wW = $(window).width();
if (offL > ((wW / 2) - $this.width())) {
return "over-left";
} else {
return "over-right";
}
});
});
$("ul.sub-menu").css({
visibility: "visible",
display: "none"
});