版本 1. 编辑版本如下
这是我最初拥有的一个非常基本的表示,我似乎无法得到比这更短的,所以我很抱歉代码负载。我评论了问题可能出在哪里。
扩展小提琴:http: //jsfiddle.net/BramVanroy/tKL8E/53/
如您所见,有一个可以悬停的菜单。在普通视图(水平菜单)中,将出现代表链接标题的工具提示(基本上,修改后的工具提示)。当您将窗口大小调整为 < 800 时,菜单应变为垂直(媒体查询)。问题是,在 if 函数中调用的函数仍然有效。修改后的工具提示不断出现并具有动画效果(而不是标准工具提示),并且箭头仍在定位。
function triangleMenu() {
var wW = $(window).width();
if (wW > 800) {
// Get rid of [title]'s and put them in data unless it has sub-items
$("li:not(.has-sub-menu) > a[title]").each(function () {
var $this = $(this);
$this.data("title", $this.attr("title"));
$this.removeAttr("title");
});
// tooltip positioning on hover and overlay fade on all li's
$("nav li").hover(function () {
// Bunch of vars
if (
($this.parent("ul:not(.sub-menu)").length || ($this.parent("ul.sub-menu").length && $this.is(":last-child"))) && !$this.hasClass("has-sub-menu")) {
tooltip.stop(true).css("right", "auto").text(title).animate({
"left": posL - (tooltip.width() / 2),
"top": posT + $this.offset().top + 20
}, 300).fadeTo(200, 1);
} else if (!$this.is(":last-child") && $this.parent("ul.sub-menu").length) {
var condition = offL > ((wW / 2) - $this.width()),
properties = {},
cssProp = {};
tooltip.stop(true).text(title);
if (condition) {
properties = {
"left": (offL - tooltip.width() - 30)
};
} else {
properties = {
"left": (offL + $this.width() + 25)
};
}
$.extend(properties, {
"top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
});
tooltip.animate(properties, 300).fadeTo(200, 1); // SO TOOLTIP ANIMATES, BUT ONLY WHEN WINDOW WIDTH EXCEEDS 800
}
},function () {
});
} else { // IF WINDOW IS TIGHTER THAN 800 PX
// Put data back
$("li:not(.has-sub-menu) > a").each(function () {
var $this = $(this),
title = $this.data("title");
$this.attr("title", title);
});
}
}
triangleMenu();
$(window).resize(function () {
triangleMenu();
});
再一次,我很抱歉这个例子的广泛性,但是在不丢失不起作用的功能的情况下进一步减少它是完全不可能的。
新:版本 2
在一些帮助和大量测试和含糖饮料的帮助下,我的“主菜单”开始工作了。调整大小的(移动/响应)菜单虽然不起作用。
当调整到较小的菜单时(您可能需要调整两次,更小,更大,更小),您应该能够通过单击打开具有子菜单的项目,但这不起作用。单击 li 时,子项会得到一堆内联样式,但我不知道它们来自哪里!
overflow: hidden; display: none; height: 159px; padding-top: 0px; margin-top: -2px; padding-bottom: 0px; margin-bottom: 0px;
我认为他们阻止了菜单显示,但我似乎无法找到他们的原因。