jQuery悬停菜单不会消失
编辑:请参阅此处的操作:http://jsbin.com/emobi/5 - 这是使用mouseenter/mouseleave。jQuery悬停菜单不会消失
我有一个基本菜单,使用一些嵌套的UL,这是我认为很标准的。当从“根”菜单悬停在LI上时,我想要显示该LI内的UL。移动鼠标或关闭另一个LI,它会显示该子菜单。向下移动到子菜单,并将其悬停在每个元素上方。我有一个简单的jQuery.hover()集,但后来遇到了问题。当在一个页面上,“根”菜单项被赋予一类'当前页',如果该类存在,我希望它在鼠标移出后静态显示该子菜单。
希望我解释得不错。我只是抛出一个变量进入悬停函数,所以在mouseout上它在当前页面的子菜单上运行.show()。简单。除了当我在子菜单的各个LI之间移动鼠标时,它将切换回当前页子菜单。所以我试图在这里添加一个基于another question的计时器元素。这使事情变得更糟 - 现在子菜单不会消失。
这是我的CSS,标记和JS ......我该如何正确地工作?
标记:
<div id="menu">
<div id="navbar">
<ul id="firstmenu">
<li>
<a href="http://localhost/site/pageone">page one</a>
<ul class="submenu">
<li><a href="http://localhost/site/pageone/subone">subone</a></li>
<li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
<li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
<li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
<li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
</ul>
</li>
<li>
<a href="http://localhost/site/pagetwo">barely there</a>
<ul class="submenu">
<li><a href="http://localhost/site/pageone/subone">subone</a></li>
<li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
<li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
<li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
<li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
</ul>
</li>
<li class="current-page">
<a href="http://localhost/site/pagetwo">kith & kin</a>
<ul class="submenu">
<li><a href="http://localhost/site/pageone/subone">subone</a></li>
<li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
<li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
<li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
<li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
</ul>
</li>
<li>
<a href="http://localhost/site/pagethree">focal point</a>
<ul class="submenu">
<li><a href="http://localhost/site/pageone/subone">subone</a></li>
<li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
<li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
<li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
<li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
</ul>
</li>
<li>
<a href="http://localhost/site/pagefour">products</a>
<ul class="submenu">
<li><a href="http://localhost/site/pageone/subone">subone</a></li>
<li><a href="http://localhost/site/pageone/subtwo">subtwo</a></li>
<li><a href="http://localhost/site/pageone/subthree">subthree</a></li>
<li><a href="http://localhost/site/pageone/subfour">subfour</a></li>
<li><a href="http://localhost/site/pageone/subfive">subfive</a></li>
</ul>
</li>
<li>
<a href="http://localhost/site/pagefive">clients</a>
</li>
</ul>
</div></div>
而这里的CSS:
#navbar {
margin: 0;
padding: 0;
border: 0;
text-align: center;
}
#firstmenu {
margin: 6px auto 0 auto;
font-size: 16px;
list-style-type: none;
letter-spacing: -1px;
}
#firstmenu li {
display: inline;
position:relative;
overflow: hidden;
text-align: center;
margin-right: 10px;
padding: 5px 15px;
}
#firstmenu a {
text-decoration: none;
outline: none;
color: black;
font-weight: 700;
width: 75px;
cursor: pointer;
}
.current-page {
color: white;
background: url(../images/down_arrow.png) bottom center no-repeat;
}
.current-page a {
color: white;
border-bottom: 1px solid black;
}
#firstmenu .current-page a {
color: white;
}
#firstmenu li.hover {
color: white;
background: url(../images/down_arrow.png) bottom center no-repeat;
}
#firstmenu li.hover a {
color: white;
border-bottom: 1px solid black;
}
#firstmenu li ul li.hover {
color: white;
background: none;
}
#firstmenu li ul li.hover a {
color: white;
border-bottom: none;
text-decoration: underline;
}
#firstmenu li ul {
width: 900px;
color: white;
font-size: .8em;
margin-top: 3px;
padding: 5px;
position: absolute;
display: none;
}
#firstmenu li ul li {
list-style: none;
display: inline;
width: auto;
}
#firstmenu li ul li a {
color: white;
font-weight: normal;
border: none;
}
.sub-current-page {
font-weight: bold;
text-decoration: underline;
}
#firstmenu li ul li.sub-current-page a {
font-weight: bold;
}
最后,我不是不惜一切工作的JS(这是一个$(文件)。就绪() ,当然):
// Initialize some variables
var hideSubmenuTimer = null;
var current_page;
$('.current-page ul:first').show();
// Prep the menu
$('#firstmenu li').hover(function() {
// Clear the timeout if it exists
if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); }
// Check if there's a current-page class set
if($('li.current-page').length > 0) {
current_page = $('li.current-page');
} else {
current_page = false;
}
// If there's a current-page class, hide it
if(current_page) { current_page.children('ul:first').hide(); }
// Show the new submenu
$(this).addClass('hover').children('ul:first').show();
}, function(){
// Just in case
var self = this;
// Clear the timeout if it exists
if(hideSubmenuTimer) { clearTimeout(hideSubmenuTimer); }
// Check if there's a current-page class set
if($('li.current-page').length > 0) {
current_page = $('li.current-page');
} else {
current_page = false;
}
// Set a timeout on hiding the submenu
hideSubmenuTimer = setTimeout(function() {
// Hide the old submenu
$(self).removeClass('hover').children('ul').hide();
// If there's a current-page class, show it
if(current_page) { current_page.children('ul:first').show(); current_page.css('color', 'white'); }
}, 500);
});
那么我在做什么这样错了?作为一个便笺,我使用$('。current-page ul:first')。show(),因为如果我在.current-page中给CSS中的任何“显示”设置,它会定位它真的很奇怪在页面上。
答案是脚本试图运行悬停/的mouseenter /无论对李的子菜单的功能。通过给每个根菜单LI的他们自己的类,它现在起作用。这样就不会调用子菜单LI的功能。这是完成的功能:
$('#firstmenu .root-item').mouseenter(function() {
$(this).addClass('hover').children('ul:first').show();
if($('.current-page').length > 0) {
$('.current-page').children('ul:first').hide();
}
}).mouseleave(function() {
$(this).removeClass('hover').children('ul').hide();
if($('.current-page').length > 0) {
$('.current-page').children('ul:first').show();
}
});
你为什么搞砸超时?你应该只是.toggle()
?
我重写它不使用悬停,但mouseover和mouseout。 不知道,如果你喜欢它,但这里是代码:
$(document).ready(function(){
$(".submenu").hide();
$("li").mouseover(function(){
$(this).find('.submenu').show();
});
$("li").mouseout(function(){
$(this).find('.submenu').hide();
})
});
编辑:我花了时间来检查你的代码,发现有问题的行:
#firstmenu li {
display: inline;
由于嵌套名单内第一个菜单div也适用于他们。内嵌的嵌套列表无法放置,因此不再放置在布局引擎中作为其dom父项的子项。结果是鼠标悬停在子菜单上仍然被认为是鼠标悬停在它的dom父项上(由于冒泡),但是在列表项之间,你将不再在dom父项上进行鼠标移动(因为它在原始设计中)。你需要重新考虑你的布局设计,因为现在它打破了布局引擎。
你或许应该重新考虑也利用列为表...
'mouseover'和'mouseout'将会触发子进程,隐藏他们......你会希望'mouseenter'和'mouseleave'在这里 – 2010-04-10 21:52:10
实际上,当它进入孩子的时候,它会触发孩子li上的'mouseover',它会滴到原来的li,并且会重新显示它们。'mouseenter'和'mouseleave'会更清洁 – tzenes 2010-04-10 22:02:05
@tzenes - 前一个元素的'mouseout'事件在下一个元素的'mouseover'之前触发,考虑'focus'和'blur'工作,相同的情况,所以子元素在'mouseover' *会被触发之前被隐藏起来,但它不可见,只是被隐藏起来,所以它永远不会被触发 – 2010-04-10 22:41:02
.toggle()用于点击事件;当鼠标悬停时,我想让菜单工作。 – 2010-04-10 21:26:45
是的,你可以在'.hover'的'function(){...}'上对一个类进行.toggle()类的调用('。 – 2010-04-10 22:42:02