当指针退出时如何将延迟放到子菜单？ （jQuery的）

Question

我使用列表导航子菜单。

<nav class="main-navigation dd-menu toggle-menu">
     <ul id="menu-main-menu" class="menu-main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children >
             <a href="#">Books</a>
             <ul class="sub-menu">
                 <li>
                     <div class="megamenu-container container">
                         <div class="row">
                             <li><a href="#">Rental</a></li>
                             <li><a href="#">New</a></li>
                             <li><a href="#">Used</a></li>
                         </div<
                     </div>
                 </li>
             </ul>
         </li>
     </ul>
</nav>

当我将鼠标悬停在图书菜单上时，会出现子菜单。子菜单距离导航30像素。

当我从“图书”菜单中释放鼠标指针时，子菜单消失。

期望的结果：如何在显示的子菜单上设置延迟，以便它不会很快消失？

请告诉我。 感谢。

Answer 1

由于你的标题，我假设你正在使用jQuery的鼠标事件：

var leaving;
$('.menu-item-has-children').mouseenter(function(){
    $(this).find('.sub-menu').show();
});
$('.menu-item-has-children').mouseleave(function(){
    var $ul = $(this).find('.sub-menu');
    if(leaving){ 
        leaving = clearTimeout(leaving); 
    }
    leaving = setTimeout(function(){
        $ul.hide();
        leaving = undefined;
    }, 500);
});

如果连续完成，这将处理多个进入/离开事件。

Answer 2

你的html中有一点错误（正确关闭课程）：

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children">

之后我的提议是（在这种情况下，fasein / fadeout采用一个参数：你提出的延迟）：

$(function () {
  $('.sub-menu').hide();
  $('a:contains("Books")').mouseover(function(e) {
    $('.sub-menu').fadeIn(1000)
  }).mouseout(function(e) {
    $('.sub-menu').fadeOut(1000)
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<nav class="main-navigation dd-menu toggle-menu">
    <ul id="menu-main-menu" class="menu-main-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children">
             <a href="#">Books</a>
            <ul class="sub-menu">
                <li>
                    <div class="megamenu-container container">
                        <div class="row">
                            <li><a href="#">Rental</a></li>
                            <li><a href="#">New</a></li>
                            <li><a href="#">Used</a></li>
                        </div>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</nav>