javascript - 指针不在时如何延迟子菜单？ (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

你的html有点错误(正确关闭类):

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

After that my proposal is (the fasein/fadeout take one argument in this case: the delay as you asked):

$(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>