Question

我目前有一个工作版本，我需要做的事情，它有时看起来很麻烦。基本上是一个可扩展的手风琴，任何时候只有一个子列表可以扩展。

这就是我所拥有的，当你慢慢从上到下移动时，问题出现了。当一个元素关闭并且光标击中下面的光标时，它会跳转。

jQuery(document).ready(function() {
    
    $(".nav li").hover(
        function(){
            $(this).css('cursor','pointer');
        }, 
        function() {
            $(this).css('cursor','auto');
        }
    );

    $('.nav').find('ul').hide().end();
    
    $('.nav').find('li').hover( 
        function(){
            $(this).children("ul").stop(true, true).slideDown('500')
        },
        function(){
            $(this).children("ul").stop(true, true).slideUp('500')
        }        
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul class="nav">
    <li>
        list Item 1
        <ul>
            <li>sublist1 item 1
            </li>
            <li>sublist1 item 2
            </li>
            <li>sublist1 item 3
            </li>
            <li>sublist1 item 4
            </li>
            <li>sublist1 item 5
            </li>
            <li>sublist1 item 6
            </li>
        </ul>
    </li>              
    <li>
        list Item 2
        <ul>
            <li>sublist2 item 1
            </li>
            <li>sublist2 item 2
            </li>
            <li>sublist2 item 3
            </li>
        </ul>
    </li>
    <li>
        list Item 3
        <ul>
            <li>sublist3 item 1
            </li>
            <li>sublist3 item 2
            </li>
            <li>sublist3 item 3
            </li>
            <li>sublist3 item 4
            </li>
            <li>sublist3 item 5
            </li>
            <li>sublist3 item 6
            </li>
            <li>sublist3 item 7
            </li>
            <li>sublist3 item 8
            </li>
        </ul>
    </li>

我看过一些使用setTimeout和clearTimeout的工作，但我无法将触发元素传递给下一个函数。

我得到那个想法的页面在这里

http://forum.jquery.com/topic/jquery-how-to-clear-settimeout

Answer 1

我个人会为此编写自己的代码 - 而不是像Drake所建议的那样使用HoverIntent - 因为我会这样学习更多。

我会为每个对象设置一个数据属性为0并将其增加x个时间量。您可能希望检测鼠标悬停并将另一个数据属性设置为true（您在函数中使用此属性，该属性为time属性添加1;如果设置为true，则鼠标位于元素上并且您想要增加它）;当鼠标离开元素时，您将该data属性设置为false并重置计时器属性。

当timer属性达到某个数字时，你执行一个函数或者你想在x时间之后做的任何事情。

Answer 2

在slideDown和slideUp调用之前添加delay(500). - 500是毫秒数

$('.nav').find('li').hover( 
    function(){
        $(this).children("ul").stop(true, true).delay(500).slideDown('500')
    },
    function(){
        $(this).children("ul").stop(true, true).delay(500).slideUp('500')
    }        
);

应该有用！

Answer 3

您可能想看一下这个答案： Delay jquery hover event?

建议使用HoverIntent插件

有没有办法只在x毫秒后对鼠标进行操作，并且只有在鼠标悬停时？

3 个答案: