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

Posted 2023-05-08

【中文标题】下拉菜单：使用 jQuery 悬停时无限滑动

【英文标题】：Dropdown Menu: Infinite Slide on Hover with jQuery

【发布时间】：2016-05-23 20:00:04

【问题描述】：

我用 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);
    );
);

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

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

【讨论】：

谢谢。为什么将 $('li > ul') 替换为 $(this).find('ul') 在这里 jsfiddle.net/6v4vuvju 不起作用？如果我将鼠标悬停在 Page B 上一次，然后将光标移开并返回 Page B，则不会显示下拉菜单。此外，当我在 Page B 上移动光标，然后在第二个 Dropdown 条目上移动光标时，下拉菜单再次隐藏。

@Adam 我更改了答案以尝试解决您在评论中写的问题和无限循环。我希望这会有所帮助。

完美的stop()正是我所需要的！