下拉菜单：使用 jQuery 悬停时无限滑动

Question

我用 jquery 创建了一个简单的下拉菜单

https://jsfiddle.net/pmksgz3w/

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();
            });
        });

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

如果我将光标极快地移动到下拉菜单，则会出现更严重的问题。因为那样的话，下拉菜单就会无限循环上滑和下滑。

我在 How to tell .hover() to wait? 找到了 2009 年的一个有前途的解决方案，但是当我尝试时答案不起作用，（编辑说明：它现在有效，请参阅下面的编辑）。进一步提到应该使用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 代码；不幸的是，这个解决方案并没有完全解决第一个问题（它仍然基于计时器）但避免了无限循环。