每次父菜单悬停时，如何在子菜单上设置延迟？ （前端）

Question

我试图对我的子菜单施加延迟效果。

  <ul id="main-menu">
       <li class="firstLevel hasSubmenu"><a href="/inmotus/" class="firstLevel">    
  <nav class="submenu">                 
     <ul>
        <li><a href="#"><font><font class="">About</font></font></a></li>
        <li><a href="#"><font><font class="">Sample</font></font></a></li>
        <li><a href="#"><font><font>Inmotus misse &amp; Vision</font></font></a></li>
        <li><a href="#"><font><font class="">Voluptatem</font></font></a></li>
        <li><a href="#"><font><font class="">Ratione</font></font></a></li>
     </ul>
  </nav>
  <ul>

问题：每当 .hasSubmenu 课程悬停时，如何在 .submenu 课程中应用延迟？

请帮帮我......

Answer 1

如果您的代码基于javascript，则此链接会非常有用。 http://cherne.net/brian/resources/jquery.hoverIntent.html

hoverIntent是一个插件，试图确定用户的意图......就像一个水晶球，只有鼠标移动！它类似于jQuery的悬停方法。但是，hoverIntent不会立即调用handlerIn函数，而是等待用户的鼠标在进行调用之前放慢速度。

它有一个配置来改变悬停的延迟，看看它是否适合你。

Answer 2

您的代码不正确我从您的代码中理解，下面是一个解决方案。我希望它会对你有所帮助。

$(document).ready(function(){
    $('ul li.firstLevel').click(function(){
    $('ul ul').slideToggle();
    });
})

<强> DEMO

更改值

$('ul ul').slideToggle(600);

然后你管理延迟时间。

Answer 3

$(document).ready(function(){
$('.submenu').hide();
$( '.hasSubmenu' ).hover( function() {
_this = $(this).parents().find('.submenu');
setTimeout(function() { 
_this.fadeIn(); }, 500);
}, function() {
_this.fadeOut();
});
});

尝试这样的事情。 （FIXED）

http://jsfiddle.net/swp64ydv/1/

Answer 4

我不确定您在延迟后的期望，但假设您希望它出现

$('.hasSubmenu').mouseenter(function()
{
setTimeout(function(){handleMouseAction(true);},500)
}).mouseleave(function()
{
setTimeout(function(){handleMouseAction(false);},500)
});

function handleMouseAction(actionFLag)
{
if(actionFlag)
{
$('submenu').show();
}
else
{
$('submenu').hide();
}
}