隐藏下拉菜单jquery

Question

对于那些了解jQuery的人，我有一个简单的问题。首先，我有这个HTML代码：

<div id="Layer-69" class="nav-bar nav-links"  >
  <a href="#" title="NOSOTROS" class="nosotros">NOSOTROS</a>
</div>
<div id="nosotros-menu">
  <ul>
    <li><a href="#" title="Quienes Somos?">Quienes Somos?</a></li>
    <li><a href="#" title="Reseña Historica">Reseña Historica</a></li>
    <li><a href="#" title="Nuestra Filosofia">Nuestra Filosofia</a></li>
  </ul>
</div>

这个jQuery代码：

$(document).on('ready', function(){
   $('.nosotros').on('mouseover', function(){
        $('#nosotros-menu').slideDown('fast');
   });
});

我现在拥有的是，当我把鼠标放在"nosotros"a元素上时，它会显示"nosotrosmenu"div元素。现在，我想做的是，当指针离开"nosotros menu"div时，这个div会隐藏起来，但我做不到，我不知道怎么做。请帮帮我，谢谢。

Answer 1

试试这个：

$(document).on('ready', function(){
   var timeout = 0;
   $('.nosotros').hover(function(){
        $('#nosotros-menu').slideDown('fast');
   },function(){
         timeout = setTimeout(hideMenu,300);
    });
   $("#nosotros-menu").hover(function(){
       clearTimeout(timeout);
   },function(){
       hideMenu();
   });
});
function hideMenu(){
    $("#nosotros-menu").slideUp('fast');
 }

Answer 2

不要使用mouseover事件，而是绑定到悬停事件。使用hover，您可以提供两个函数，一个用于用户鼠标进入时，另一个用于鼠标离开时，jquery为您将其连接起来。在第一个函数中，执行slideDown操作，然后在第二个函数中执行slideUp操作。

Answer 3

您可以这样做：

$(document).on('ready', function(){
   $('.nosotros').hover(
     function () {
       $('#nosotros-menu').slideDown('fast');
     }, 
     function () {
       $('#nosotros-menu').slideUp('fast');
     }
   );
});