我创建了一个dropline菜单。我正在使用使用Foundation 5框架的WordPress主题。第二级菜单不是很容易使用我添加了一些JavaScript来添加延迟到第二级菜单消失。这个JavaScript意味着：
这在某种程度上起作用，但却引发了一些问题
任何提示都会非常感激！我还没有把菜单的所有HTML都包含在很长的
中 <ul id="menu-main-navigation" class="desktop-menu"><li id="menu-item-488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-488"><a href="http://new.st-laurence.com/">Home</a></li>
<li id="menu-item-489" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-489"><a href="http://new.st-laurence.com/about-us/">About Us</a>
<ul class="sub-menu" style="display: block; left: 0px;">
<li id="menu-item-490" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-490"><a href="http://new.st-laurence.com/about-us/latest-news/">Latest News</a></li>
<li id="menu-item-491" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-491"><a href="http://new.st-laurence.com/about-us/our-history/">Our History</a></li>
<li id="menu-item-492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-492"><a href="http://new.st-laurence.com/about-us/photo-gallery/">Photo Gallery</a></li>
<li id="menu-item-493" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-493"><a href="http://new.st-laurence.com/about-us/exam-results/">Exam Results</a></li>
<li id="menu-item-494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-494"><a href="http://new.st-laurence.com/about-us/senior-team/">Senior Team</a></li>
<li id="menu-item-495" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-495"><a href="http://new.st-laurence.com/about-us/governors/">Governors</a></li>
<li id="menu-item-496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-496"><a href="http://new.st-laurence.com/about-us/slsa-parents-association/">SLSA Parents’ Association</a></li>
<li id="menu-item-497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-497"><a href="http://new.st-laurence.com/about-us/ofsted/">Ofsted</a></li>
<li id="menu-item-526" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-526"><a href="http://new.st-laurence.com/about-us/academy/">Academy</a></li>
</ul>
</li>
<li id="menu-item-499" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-327 current_page_item menu-item-has-children menu-item-499 active-menu-item active"><a href="http://new.st-laurence.com/join-us/">Join Us</a>
<ul class="sub-menu">
<li id="menu-item-500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-500"><a href="http://new.st-laurence.com/join-us/admissions/">Admissions</a></li>
<li id="menu-item-501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-501"><a href="http://new.st-laurence.com/join-us/primary-transition/">Primary Transition</a></li>
<li id="menu-item-601" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-601"><a href="http://new.st-laurence.com/vacancies/">Staff Vacancies</a></li>
</ul>
</li>
<li id="menu-item-502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-502"><a href="http://new.st-laurence.com/curriculum/">Curriculum</a>
<ul class="sub-menu" style="display: block; left: 0px;">
<li id="menu-item-503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-503"><a href="http://new.st-laurence.com/curriculum/subjects/">Subjects</a></li>
</ul>
</li>
<li id="menu-item-509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-509"><a href="http://new.st-laurence.com/school-life/">School Life</a>
<ul class="sub-menu" style="display: block; left: 0px;">
<li id="menu-item-510" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-510"><a href="http://new.st-laurence.com/school-life/houses/">Houses</a></li>
<li id="menu-item-511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-511"><a href="http://new.st-laurence.com/school-life/students-wellbeing/">Student Wellbeing</a></li>
<li id="menu-item-513" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513"><a href="http://new.st-laurence.com/school-life/school-council/">School Council</a></li>
<li id="menu-item-512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512"><a href="http://new.st-laurence.com/school-life/school-clubs/">School Clubs</a></li>
<li id="menu-item-514" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-514"><a href="http://new.st-laurence.com/school-life/performing-arts/">Performing Arts</a></li>
<li id="menu-item-516" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-516"><a href="http://new.st-laurence.com/school-life/sports-leadership/">Sports Leadership</a></li>
<li id="menu-item-517" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-517"><a href="http://new.st-laurence.com/school-life/spiritual-life/">Spiritual Life</a></li>
</ul>
</li>
</ul>
这是我的JavaScript
$(document).ready(function(){
var $submenu;
var $delay = 3000;
var myVar;
$("#menu-main-navigation li:not(.active)").mouseover(function() {
clearTimeout(myVar);
$submenu = $(this).find('.sub-menu');
$submenu.css({
display: 'block',
left:'0'
});
}).mouseout(function() {
if($("#menu-main-navigation li:hover").length){
clearTimeout(myVar);
return false;
}else{
var $submenu = $(this).find('.sub-menu');
$submenu.hover(
function(){
$(this).toggleClass('is-hover');
}
);
setTimeout(function(){
if(!$submenu.hasClass('is-hover')){
myVar = setTimeout(function(){
$submenu.css({
display: 'none',
left:'-999'
});
},500);
}
},1000);
}
});
$('.sub-menu li').mouseover(function(){
$(this).closest('ul').addClass('is-hover');
clearTimeout(myVar);
$(this).closest('ul').css({
display: 'block',
left:'0'
});
}).mouseout(function(){
$(this).closest('ul').removeClass('is-hover');
myVar = setTimeout(function(){
$(this).closest('ul').css({
display: 'none',
left:'-999'
});
},$delay);
});
});
答案 0 :(得分：1)
希望这可能有助于其他人。这是我使用的js
var myTimer;
//Replace li hover state with javascript
$('.desktop-menu>li').hover(function() {
clearTimeout(myTimer);
if ($(this).hasClass('activetab')) {
// do nothing because the link is already active
} else {
// remove .activetab from all tabs
$('.activetab').removeClass('activetab');
// add .activetab to this tab
$(this).addClass('activetab');
}
});
//Replace ul hover state with javascript
$('ul#menu-main-navigation').hover(function() {
if ($(this).hasClass('activemenu')) {
// do nothing because the link is already active
} else {
// add .activemenu to this menu
$(this).addClass('activemenu');
}
});
//Remove the submenu after 2 seconds of leaving the top menu
$('.top-bar-section').mouseleave(function() {
myTimer = window.setTimeout(function() {$('.desktop-menu>li.activetab').removeClass('activetab');
$('ul#menu-main-navigation').removeClass('activemenu');},2000);
});