我创建了一个下拉菜单。我正在使用一个使用 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);
});
});
最佳答案
希望这可能对其他人有所帮助。这是我用过的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);
});
关于javascript - 下拉菜单 JavaScript 延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26471946/