Dropline菜单JavaScript延迟
我已经创建了一个dropline菜单。我使用的是WordPress主题，它使用的是基础5框架。第二级菜单不太容易使用，我添加了一些JavaScript，为第二级菜单添加了延迟。此JavaScript旨在：Dropline菜单JavaScript延迟,javascript,html,wordpress,menu,zurb-foundation,Javascript,Html,Wordpress,Menu,Zurb Foundation,我已经创建了一个dropline菜单。我使用的是WordPress主题，它使用的是基础5框架。第二级菜单不太容易使用，我添加了一些JavaScript，为第二级菜单添加了延迟。此JavaScript旨在： 为二级菜单添加延迟，这样，如果您将鼠标悬停在菜单外，二级菜单不会立即消失 这在某种程度上是可行的，但也引发了一些问题 有时，当您将鼠标悬停在顶级菜单项上时，您将无法继续悬停并看到其他顶级菜单项的子菜单 我必须为顶级项目悬停使用相同的时间延迟值，并设置用户在菜单消失之前在菜单外停留的时间。这
- 为二级菜单添加延迟，这样，如果您将鼠标悬停在菜单外，二级菜单不会立即消失
<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>
希望这能帮助其他人。这是我用过的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);
});
您可以添加相关的CSS并创建一个
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);
});