Question

以下是代码，当鼠标悬停在li项目上时，标签会动画并增长到270px同时打开包含输入字段的相同宽度的下拉列表div，但是当我移动时鼠标离开dropdown div或尝试从下拉关闭的选项列表中选择一些东西，我想要一些延迟或其他解决方案来解决这个问题

$(function() {
            /**
             * the menu
             */
            var $menu = $('#ldd_menu');

            /**
             * for each list element,
             * we show the submenu when hovering and
             * expand the span element (title) to 270px
             */
            $menu.children('li').each(function(){
                var $this = $(this);
                var $span = $this.children('span');
                $span.data('width',$span.width());

                $this.bind('mouseenter',function(){
                    $menu.find('.ldd_submenu').stop(true,true).hide();
                    $span.stop().animate({'width':'270px'},300,function(){
                        $this.find('.ldd_submenu').slideDown(300);
                    });
                }).bind('mouseleave',function(){
                    $this.find('.ldd_submenu').stop(true,true).hide();

                    $span.stop().animate({'width':$span.data('width')+'px'},300);
                });
            });
        });

Answer 1

在jQuery中并不完全确定，但在直接javascript中点击该项目会让它集中注意力并保持焦点直到你点击其他地方，所以你要做的是测试失去焦点（我猜测mouseenter / mouseleave检查鼠标是否悬停在该项目上。）

定时器并不是真正的方法，因为不同的人可能会比其他人更长时间地思考菜单上的选项，并且你想让他们自由地做到这一点。

Answer 2

尝试添加delay()：

....bind('mouseleave',function(){
         $this.find('.ldd_submenu').delay(300).stop(true,true).hide();
         $span.delay(300).stop().animate({'width':$span.data('width')+'px'},300);
       });

我想在同一时间延迟下拉隐藏和动画

2 个答案: