javascript - 下拉菜单 : Infinite Slide on Hover with 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>

查询

$(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 代码；不幸的是，这个解决方案并没有完全解决第一个问题(它仍然基于计时器)但避免了无限循环。