1

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

$(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);
                });
            });
        });
4

2 回答 2

0

在 jQuery 中不完全确定，但是在直接的 javascript 中单击该项目会使其获得焦点，并且焦点会一直保留，直到您单击其他地方，所以您要做的是测试是否失去焦点（我猜 mouseenter/mouseleave 检查是否鼠标悬停在项目上）。

计时器并不是真正解决这个问题的方法，因为不同的人可能会比其他人更长时间地思考菜单上的选项，而您希望让他们自由地这样做。

于 2012-09-09T11:29:47.863 回答
0

尝试添加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);
       });
于 2012-09-09T11:31:06.057 回答