子菜单导航存在悬停问题
我有一个三个级别的导航菜单:始终可见的主菜单、子菜单和子子菜单。
子菜单和子子菜单仅应在悬停时出现。我正在使用具有此配置的hoverint jquery插件:
jQuery(function() {
var mainmenu_cfg = {
interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
};
function openSubmenu() {
$("ul#submenu").css('visibility', 'visible');
}
function closeSubmenu() {
$("ul#submenu").css('visibility', 'hidden');
}
var submenu_cfg = {
over: openSubsubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubsubmenu
}
function openSubsubmenu() {
console.info($(this).next());
$(this).next().css('visibility', 'visible');
$("ul#submenu").css('visibility', 'visible');
}
function closeSubsubmenu() {
$(this).css('visibility', 'hidden');
$(this).next().css('visibility', 'hidden');
}
$("li.servizi a").hoverIntent(mainmenu_cfg);
$("#submenu > li a").hoverIntent(submenu_cfg);
});
发生的情况是,当我将鼠标悬停在主菜单中的链接上时,第一个子菜单正确显示,但是当我将鼠标移到子菜单上时,它会在一段时间后消失(我想是因为调用“closeSubmenu”函数)。我认为子菜单也会发生同样的情况,但我仍然卡在这里,所以......
我怎样才能保持子菜单打开? 还有一件事:主菜单是垂直的,第一个子菜单是水平的,所以我需要在“a”元素上调用hoverIntent函数,而不是在“li”上,否则它会激活整个“li”,这实际上是更长。
编辑:
这是一个演示: http://jsfiddle.net/dtBzE/
编辑2: 我几乎解决了添加很多条件的问题。它并不完美,需要优化,但它有效:
jQuery(function() {
var mainmenu_cfg = {
interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
}
var submenu_cfg = {
over: openSubsubmenu,
sensitivity: 100,
timeout: 200,
out: closeSubsubmenu
}
var subsubmenu_cfg = {
over: onSubsubmenu,
sensitivity: 100,
timeout: 500,
out: offSubsubmenu
}
var hover_submenu = false;
var hover_subsubmenu = false;
function openSubmenu() {
$("ul#submenu").css('visibility', 'visible');
}
function closeSubmenu() {
if (hover_submenu || hover_subsubmenu) {
$("ul#submenu").css('visibility', 'visible');
hover_submenu = false;
hover_subsubmenu = false;
}
else {
console.info(hover_submenu);
console.info('close submenu');
$("ul#submenu").css('visibility', 'hidden');
}
}
function openSubsubmenu() {
hover_submenu = true;
$(this).next().css('visibility', 'visible');
}
function closeSubsubmenu() {
if (!hover_subsubmenu)
$(this).next().css('visibility', 'hidden');
if (hover_submenu || hover_subsubmenu)
{
$("ul#submenu").css('visibility', 'visible');
hover_submenu = false;
hover_subsubmenu = false;
}
else if ((hover_submenu == true) && (hover_subsubmenu == false)) {
$(this).next().css('visibility', 'hidden');
$("ul#submenu").css('visibility', 'visible');
hover_submenu = false;
} else {
$("ul#submenu").css('visibility', 'hidden');
}
}
function onSubsubmenu() {
hover_subsubmenu = true;
$(this).parent().parent().css('visibility', 'visible');
}
function offSubsubmenu() {
$(this).parent().parent().css('visibility', 'hidden');
}
$("li.servizi a").hoverIntent(mainmenu_cfg);
$("#submenu > li a").hoverIntent(submenu_cfg);
$("ul.subsubmenu > li a").hoverIntent(subsubmenu_cfg);
});
I have a navigation menu on three levels: a mainmenu always visible, a submenu and a subsubmenu.
The submenu and the subsubmenu should appear only on hovering. I'm using the hoverint jquery plugin with this configuration:
jQuery(function() {
var mainmenu_cfg = {
interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
};
function openSubmenu() {
$("ul#submenu").css('visibility', 'visible');
}
function closeSubmenu() {
$("ul#submenu").css('visibility', 'hidden');
}
var submenu_cfg = {
over: openSubsubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubsubmenu
}
function openSubsubmenu() {
console.info($(this).next());
$(this).next().css('visibility', 'visible');
$("ul#submenu").css('visibility', 'visible');
}
function closeSubsubmenu() {
$(this).css('visibility', 'hidden');
$(this).next().css('visibility', 'hidden');
}
$("li.servizi a").hoverIntent(mainmenu_cfg);
$("#submenu > li a").hoverIntent(submenu_cfg);
});
What happens is that when I hover on a link in the mainmenu the first submenu appears correctly, but when I move the mouse over the submenu this disappears after a while (I suppose because the "closeSubmenu" function is called). The same would happen with the subsubmenu, I think, but I'm still stuck here, so...
How can I keep the submenu open?
One more thing: the mainmenu is vertical and the first submenu is horizontal, so I need to call the hoverIntent function on the "a" element and not on the "li", otherwise it would activate for the whole "li" which is actually longer.
EDIT:
here's a demo:
http://jsfiddle.net/dtBzE/
EDIT 2:
I almost solved the issue adding a lot of conditionals. It's not perfect and needs optimizations, but it works:
jQuery(function() {
var mainmenu_cfg = {
interval: 200,
over: openSubmenu,
sensitivity: 100,
timeout: 500,
out: closeSubmenu
}
var submenu_cfg = {
over: openSubsubmenu,
sensitivity: 100,
timeout: 200,
out: closeSubsubmenu
}
var subsubmenu_cfg = {
over: onSubsubmenu,
sensitivity: 100,
timeout: 500,
out: offSubsubmenu
}
var hover_submenu = false;
var hover_subsubmenu = false;
function openSubmenu() {
$("ul#submenu").css('visibility', 'visible');
}
function closeSubmenu() {
if (hover_submenu || hover_subsubmenu) {
$("ul#submenu").css('visibility', 'visible');
hover_submenu = false;
hover_subsubmenu = false;
}
else {
console.info(hover_submenu);
console.info('close submenu');
$("ul#submenu").css('visibility', 'hidden');
}
}
function openSubsubmenu() {
hover_submenu = true;
$(this).next().css('visibility', 'visible');
}
function closeSubsubmenu() {
if (!hover_subsubmenu)
$(this).next().css('visibility', 'hidden');
if (hover_submenu || hover_subsubmenu)
{
$("ul#submenu").css('visibility', 'visible');
hover_submenu = false;
hover_subsubmenu = false;
}
else if ((hover_submenu == true) && (hover_subsubmenu == false)) {
$(this).next().css('visibility', 'hidden');
$("ul#submenu").css('visibility', 'visible');
hover_submenu = false;
} else {
$("ul#submenu").css('visibility', 'hidden');
}
}
function onSubsubmenu() {
hover_subsubmenu = true;
$(this).parent().parent().css('visibility', 'visible');
}
function offSubsubmenu() {
$(this).parent().parent().css('visibility', 'hidden');
}
$("li.servizi a").hoverIntent(mainmenu_cfg);
$("#submenu > li a").hoverIntent(submenu_cfg);
$("ul.subsubmenu > li a").hoverIntent(subsubmenu_cfg);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论