Question

我用jquery

创建了一个简单的下拉菜单

HTML

<ul>
  <li>Page A</li>
  <li>Page B
    <ul>
      <li>Dropdown</li>
      <li>Dropdown</li>
    </ul>
   </li>
</ul>

Jquery的

$(document).ready(function(){
            $('ul> li').hover(function() {
                 $(this).find('ul').slideToggle();
            });
        });

当我将鼠标悬停在Page B上时，会显示下拉菜单。如果我将光标从页面B非常慢地向右移动（见图片），则下拉菜单将关闭，因为li不会在短时间内徘徊。如何防止下拉菜单立即关闭？

如果我将光标移动到下拉菜单，会发生更严重的问题。因为那时，下拉菜单将以无限循环的方式slideUp和slideDown。

我在How to tell .hover() to wait?找到了一个有希望的解决方案，但是当我尝试时，答案是行不通的（编辑说明：现在可以使用，请参阅下面的编辑）。此外，还提到应该使用hoverIntend插件。我下载了插件并将我的jQuery代码更改为

$(document).ready(function(){
            $('ul> li').hoverIntend(function() {
                 $(this).find('ul').slideToggle();
            });
        });

虽然它改进了一些东西，但它立即关闭并且无限循环的上述问题仍然存在。我该如何解决这个问题？

编辑：我设法解决了第一个问题！现在下拉列表不会立即关闭！

https://jsfiddle.net/5sxvsu8w/

我必须按如下方式更改jQUery代码：

$(document).ready(function(){
    var timer;

    $('ul> li').hover(function() {
      clearTimeout(timer);
      $(this).find('ul').slideDown('fast');
    }, function() {
      var list = $(this).find('ul');
      timer= setTimeout(function() {
      list.slideUp('fast');
     }, 2000);
    });
});

然而，无限循环问题仍然存在。

Answer 1

您在here中找到的解决方案很有用，这个javascript代码可能有所帮助：

$(document).ready(function(){
            
  $('.menu li').hover(
    function () {
        $('.sub', this).stop().slideDown(650);
    }, 
    function () {
        $('.sub', this).stop().slideUp(650);
    }
);

});




/*$('ul >li').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li > ul').slideUp('fast');
    }, 650);
    $(this).data('timeout', t);
});*/

li{
  list-style-type:none;
  display: inline-block;
  position: relative;
  padding: 20px;
  background-color: #08c;
}

li ul li{
  min-width:200px;
}

li ul{
  margin:0;
  padding:0;
  position: absolute;
  top: 100%;
  left:0;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li>Page A</li>
  <li>Page B
    <ul class="sub">
      <li>Dropdown</li>
      <li>Dropdown</li>
    </ul>
   </li>
   
</ul>

编辑：我在进行了一些研究后更改了我的javascript代码;遗憾的是，这个解决方案并没有完全解决第一个问题（它仍然基于计时器），但避免了无限循环。

下拉菜单：使用jQuery

1 个答案: