鼠标移开时下拉菜单消失延迟 1 秒，除非返回

Posted 2023-03-06

【中文标题】鼠标移开时下拉菜单消失延迟 1 秒，除非返回

【英文标题】：Delay for 1 second the disappearance of a dropdown menu when the mouse is moved away, unless it is returned

【发布时间】：2015-02-04 10:13:52

【问题描述】：

这是我的 html 导航栏

<nav>
    <ul id="mainnav">
        <li><a href="#">a thing</a></li>
        <li><a href="#">some stuff</a>
            <ul>
                <li><a href="###">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
            </ul>
        </li>           
    </ul>
</nav>

和 javascript

<script type="text/javascript">

$('#mainnav ul').hide();

$('#mainnav li > a').hover(
      function () 
      //show its submenu
        $('ul', this.parentNode).stop().slideDown(0) = set 
      
    );

$('#mainnav li').hover(null, 
      function () 
      //hide its submenu
        $('ul', this.parentNode).stop().delay(1000).slideUp(0); 
    );

我从一个 jsfiddle 获得了 JavaScript 并成功了。我在 HTML 和 CSS 方面相当胜任，但除了相当明显的逻辑之外，我会说 JavaScript 对我来说是陌生的。

使用 CSS，一切看起来像这样：

我正在寻找一个 CSS sn-p，当我将鼠标 OFF (hover(null)) 放在下拉菜单中时，它不会立即消失 em>，而是延迟到一秒钟后，但如果我在它之前将鼠标放回菜单上，它不会消失。

我看得很清楚，但在网站上找不到任何答案，不仅直接解决了这个确切的问题，而且简单到让我理解。

【参考方案1】：

DEMO 我应该说 javascript 不是这种情况的好解决方案.. css 是实现这一目标的更好方法.. 无论如何

$(document).ready(function()
    $('#mainnav li ul').hide()
    $('#mainnav li').on('mouseenter', function()
        $(this).css('background','yellow');
        $(this).find('ul').slideDown(700);
    );
    $('#mainnav li').on('mouseleave', function()
        $(this).css('background','none');
        $(this).find('ul').slideUp(700);
    );
);

在css中DEMO

#mainnav li
    background: #eee; 

#mainnav li ul li
    background: none; 

#mainnav li:hover
   background: yellow;

#mainnav li:hover ul
    height: 100px;
    transition-delay: 0s;
     transition-duration: 1s;

#mainnav li ul
    overflow: hidden;
    height: 0px;
    transition-delay: 10s;
    transition-duration: 2s;

转换延迟：10s；子菜单会在 10 秒后消失，请耐心等待

【讨论】：

很抱歉，但这并没有达到预期的效果。确定它会减慢slideUp，但我不希望slideUp 完全开始，直到几秒钟后我的鼠标离开下拉菜单....嗯

这是一个功能性解决方案，但它要求在菜单变得可用之前，每个 mouseenter 和 mouseleave 事件都完整完成。在#mainnav li 上多次滑动鼠标，然后观看。

很抱歉，这仍然没有帮助。对我来说，这种延迟的目的是：如果用户暂时将鼠标移开，他们可以将鼠标返回到下拉菜单中，而无需返回并重新悬停在主导航标题上。基本上，如果我将鼠标移开并放回下拉菜单在它消失之前，它仍然消失！我希望它在延迟后消失，除非我将鼠标返回到下拉菜单。这有意义吗？你有什么建议@sabaeus？

【参考方案2】：

编辑：我认为上述纯 css 解决方案更好。

试试这个：http://jsfiddle.net/dqisv/g1f0nth5/3/

将默认子菜单显示设置为无，然后使用 jQuery 的 addClass 将该元素的显示设置为阻塞。添加一个延迟，然后创建一个队列项来移除该类。

$(document).ready(function ()     
    $('#mainnav li').hover(
        function () 
             $('ul', this).addClass('subnav-show').delay(2000).queue(function()
                $(this).removeClass('subnav-show').dequeue();
            );               
        );
);

您也可以尝试使用这个：http://cherne.net/brian/resources/jquery.hoverIntent.html