I recently developed a hover menu with CSS and jQuery to display sub-menus. However, I noticed that if the user hovers multiple times on the menu item, it behaves strangely. You can check out the menu in action at this URL: . Here's the jQuery code I used (inside document ready):
if ($(window).width()>991) //menu script for desktop or laptop
{
$('#mob-main-menu > li.menu-item-has-children').hover(function(event){
event.preventDefault();
$(this).children('a').toggleClass('bold600');
$(this).children('a').siblings('.sub-menu').slideToggle();
});
}
else // menu script for touch devices
{
$('#mob-main-menu > li.menu-item-has-children').click(function(event){
if ($(this).children('a').siblings('.sub-menu').css('display') == 'none')
{
event.preventDefault();
console.log('hidden');
}
$(this).children('a').toggleClass('bold600');
$(this).children('a').siblings('.sub-menu').slideToggle();
});
}
I attempted to use setTimeout() function to resolve this issue but was unsuccessful. Is there a way to limit the code to execute no more than twice regardless of the number of hovers, and then reset after a certain period? Any other suggestions to improve its performance would be greatly appreciated.