jQuery的菜单问题
问题描述:
我有菜单,选项卡:jQuery的菜单问题
<div class="section">
<ul class="topnav">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul><!--//topnav-->
<div class="tabbox">
Tab here
</div>
<div class="tabbox">
Tab here
</div>
<div class="tabbox">
Tab here
</div>
</div><!--//section-->
这里是jQuery代码:
(function($) {
$(function() {
$('ul.topnav').delegate('li:not(.curtab)', 'click', function(event) {
$(this).addClass('curtab').siblings().removeClass('curtab')
.parents('div.section').find('div.tabbox').hide().eq($(this).index()).show(); });})
})(jQuery)
我需要的是改写为悬停事件此菜单中,当你将鼠标悬停在<li>
元素,标签出现,如果你mouseout - 它消失,当你mouseout的<li>
,并下降到选项卡,它不应该消失,目前我试图使它的工作,但当我mouseover <li>
并下去悬停标签,它消失
答
我不知道这是否是最好的方式来做到这一点,但我所做的是在结束之前给予延迟。然后,当它关闭时,我会测试鼠标是否在开启器或标签栏菜单上。
下面是我使用的面板菜单的一个例子,它非常简单。
var timer = null;
var timer2 = null;
var buttonHot = false;
var navHot = false;
var menuOpen = false;
var inMotion = false;
var activeMenu = null;
$(document).ready(
function() {
$('#adminButton').mouseover(function() {
buttonHot = true;
activeMenu = 'adminMenu';
startOpenTimer();
});
$('#adminButton').mouseout(function() {
buttonHot = false;
startCloseTimer();
});
$('#personnelButton').mouseover(function() {
buttonHot = true;
activeMenu = 'personnelMenu';
startOpenTimer();
});
$('#personnelButton').mouseout(function() {
buttonHot = false;
startCloseTimer();
});
$('#panelMenu').mouseover(function() {
navHot = true;
openMenu();
});
$('#panelMenu').mouseout(function() {
navHot = false;
startCloseTimer();
});
}
);
function startCloseTimer() {
timer = setTimeout(closeMenu, 150);
}
function startOpenTimer() {
timer2 = setTimeout(openMenu, 90);
}
function openMenu() {
if(buttonHot) {
$('#adminMenu').hide();
$('#schoolMenu').hide();
$('#personnelMenu').hide();
$('#' + activeMenu).show();
$('#panelMenu').show();
if (!menuOpen && !inMotion) {
inMotion = true;
$('#panelMenuSlide').slideDown(400, setOpen);
} else {
if (inMotion) {
$('#panelMenuSlide').stop(true, true);
inMotion = false;
openMenu()
}
}
}
}
function setOpen() {
inMotion = false;
menuOpen = true;
}
function closeMenu() {
clearTimeout(timer);
if (menuOpen && !navHot && !buttonHot) {
inMotion = true;
$('#panelMenuSlide').slideUp(400, hideMenu);
}
if (inMotion) {
startCloseTimer();
}
}
function hideMenu() {
menuOpen = false;
inMotion = false;
if (!navHot && !buttonHot) {
$('#panelMenu').hide();
} else {
openMenu();
}
}
function setOpen() {
menuOpen = true;
}
答
我重新调整了HTML把<li>
标签内的标签,以便将鼠标悬停在标签保持在李触发:
<div class="section">
<ul class="topnav">
<li>
<a href="#">First</a>
<div class="tabbox">
Tab 1
</div>
</li>
<li>
<a href="#">Second</a>
<div class="tabbox">
Tab 2
</div>
</li>
<li>
<a href="#">Third</a>
<div class="tabbox">
Tab 3
</div>
</li>
</ul><!--//topnav-->
</div><!--//section-->
,改变了jQuery的使用mouseenter
和mouseleave
确定标签应显示或隐藏:
(function($) {
$(function() {
$('ul.topnav').delegate('li:not(.curtab)', 'mouseenter', function(e) {
$(this).addClass('curtab')
.siblings().removeClass('curtab')
.parents('div.section').find('div.tabbox').hide()
.eq($(this).index()).show();
});
$('ul.topnav').delegate('li', 'mouseleave', function(e) {
$(this).removeClass('curtab')
.parents('div.section').find('div.tabbox').hide();
});
});
})(jQuery);
测试和功能。 http://jsfiddle.net/nAmAh/