导航下拉菜单MouseOut延迟

Question

当访客鼠标离开菜单时，如何添加延迟以停止关闭下拉菜单？其中一些菜单很深，所以我讨厌让菜单意外关闭。

    <div class="menu">
  <ul>
        <li>
            <a href="#">Home</a>
        </li>
    <li>
      <a href="/products/">Products</a>
      <ul>
        <li>
                    <a href="product1">product type</a>
          <ul>
            <li>
              <a href="lin1">product1</a>
            </li>
          </ul>
        </li>
         <li>
            <a href="link">product type 2</a>
            <ul>
                <li>
                    <a href="link">product2</a>
                </li>
            </ul>
         </li>
      </ul>
    </li>
     <li>
        <a href="klink">Where To Buy</a>
        <ul>
            <li>
                <a href="link">place1</a>
            </li>
        </ul>
     </li>
     <li>
        <a href="link">Contact Us</a>
     </li>
  </ul>
</div>

Answer 1

您可以使用mouseout事件和setTimeout方法。

请参阅jsFiddle Demo

$(document).ready(function(){

    $('#menu').on('mouseout',function(){
        setTimeout(function(){
            alert("I'm one second late");
        },1000);
    });

});

当您悬停时#menu没有任何反应，但是当光标离开菜单时，它会在1秒（或1000毫秒）后触发一个动作（在这种情况下是警报）。