我有一个使用wp_nav_menu的链接列表,因此客户端可以轻松编辑它们。那些输出一种菜单。与此分开,我有一组直接绑定到这些列表项的自定义帖子。当我将鼠标悬停在列表项上时,我希望显示与菜单项关联的信息,但如果我也点击其中的链接,则保持可见。
以下是我目前正在使用的代码,哪种作品,但这些项目会定期显示。还有其他人试图实现这个目标吗?
$('#nav > li').each(function(){
var first = $(this).attr('class').replace(/^(\S*).*/, '$1')
$(this).hover(function(){
$('.programs').show(100);
$('.program_home').addClass('visuallyhidden');
$('#' + first).toggleClass('visuallyhidden');
}, function() {
$('#' + first).mouseout(function(){
$(this).addClass('visuallyhidden');
$('.programs').hide();
});
});
});
此外,我的页面代码如下所示:
<section class="switcher">
<nav class="grid_3">
<ul id="nav" class="menu">
<li id="menu-item-4512" class="busprof menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/business-professionals/"><strong>Business Professionals</strong><span class="desc">Courses & Certificates for Business and Engineering professionals</span><span class="arrow"></span></a></li>
<li id="menu-item-4516" class="creative_writing menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/creative-writing/"><strong>Creative Writing</strong><span class="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec </span><span class="arrow"></span></a></li>
<li id="menu-item-4528" class="languages menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/languages-translation/"><strong>Languages & Translation</strong><span class="desc"> </span><span class="arrow"></span></a></li>
<li id="menu-item-4527" class="arts_science menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/arts-science/"><strong>Arts & Science</strong><span class="desc"> </span><span class="arrow"></span></a></li>
<li id="menu-item-4526" class="elp menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/english-language-program/"><strong>English Language Program</strong><span class="desc"> </span><span class="arrow"></span></a></li>
<li id="menu-item-4525" class="online menu-item menu-item-type-post_type menu-item-object-page"><a href="http://scs.cmsstaging.utoronto.ca/courses-programs/online-distance-learning/"><strong>Online & Distance Learning</strong><span class="desc"> </span><span class="arrow"></span></a></li>
</ul>
</nav>
<div class="programs">
<dl id="online" class="visuallyhidden program_home">
<dd>Defenition</dd>
<dt class="classes">Definition Title</dt>
<dd>
<ul>
<li><a href="#">Link</a></li>
</ul>
</dd>
<dd>
<blockquote>excerpt</blockquote>
</dd>
<dt class="learn_more"><span>Learn</span> more.</dt>
</dl>
<dl id="elp" class="visuallyhidden program_home">
<dd>Defenition</dd>
<dt class="classes">Definition Title</dt>
<dd>
<ul>
<li><a href="#">Link</a></li>
</ul>
</dd>
etc...
</section>
将Top jQuery代码修改为:
$('#nav > li').each(function(){
var first = $(this).attr('class').replace(/^(\S*).*/, '$1'), timer;
$(this).hover(function(){
clearTimeout(timer);
$('.program_home').addClass('visuallyhidden');
$('.programs').fadeIn(200);
$('#' + first).removeClass('visuallyhidden');
}, function() {
timer = setTimeout(function(){
$('#' + first).addClass('visuallyhidden');
$('.programs').fadeOut(200);
},75);
});
$('#' + first).hover(function(){
clearTimeout(timer);
},function(){
$(this).addClass('visuallyhidden');
$('.programs').hide();
});
});
基于建议。它有效,但看起来很麻烦。我将改变时间和课程调整,看看是否可以改进。
答案 0 :(得分:0)
试试这个:
$('#nav > li').each(function(){
var first = $(this).attr('class').replace(/^(\S*).*/, '$1'), timer;
$(this).hover(function(){
$('.programs').show(100);
$('.program_home').addClass('visuallyhidden');
$('#' + first).toggleClass('visuallyhidden');
}, function() {
timer = setTimeout(function(){
$('#' + first).addClass('visuallyhidden');
$('.programs').hide();
},10);
});
$('#' + first).hover(function(){
clearTimeout(timer);
},function(){
$(this).addClass('visuallyhidden');
$('.programs').hide();
})
});
基本思想是,如果你将鼠标从悬停元素鼠标移动到div,则隐藏代码不会发生,如果你将鼠标移出div,则div会被隐藏。