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”元素上时，它会显示“nosotros-menu”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');
     }
   );
});

隐藏下拉菜单jquery

3 个答案: