当鼠标悬停时 jquery dropline 保持第二个

发布于 2024-11-19 13:45:50 字数 120 浏览 1 评论 0原文

有没有办法在此下拉菜单上获得此行为?需要第二级或第三级才能保持活动状态当鼠标从菜单项悬停时一秒钟。

Is there a way to get this behavior on this dropline menu?Need second or thrid level to stay active for one second when mouse is hover out from menu items.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

漫雪独思 2024-11-26 13:45:50

澄清一下,您正在寻找对鼠标移动的某种延迟反应?如果是这样,请查看这个 jQuery悬停意图插件: http://cherne.net/brian/resources /jquery.hoverIntent.html

编辑: 我认为您需要编辑菜单脚本以将 .hover 的任何实例替换为 .hoverIntent。我在 jsfiddle 中测试这个时遇到问题,但看看它是否有效:

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src:'http://www.odzaci.rs/wp-content/themes/typo/images/down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 300}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)
            $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
            $innerheader.append(
                '<img src="'+ droplinemenu.arrowimage.src
                +'" class="' + droplinemenu.arrowimage.classname
                + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
            )

            // THIS IS THE PART I REPLACED

            var config = {    
     over: function(e){
            var $targetul=$(this).children("ul:eq(0)")
            if ($targetul.queue().length<=1) //if 1 or less queued animations
                if (this.istopheader)
                    $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
                if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                    $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                $targetul.slideDown(droplinemenu.animateduration.over)
        },
timeout: 1000, // number = milliseconds delay before onMouseOut    
out: function(e){
            var $targetul=$(this).children("ul:eq(0)")
            $targetul.slideUp(droplinemenu.animateduration.out)
        }
};

$curobj.hoverIntent( config );




        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    }) //end document.ready
}
}

To clarify, you're looking for some kind of delayed reaction to the mouse's movement? If so, check out this jQuery hoverintent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html

EDIT: I think you'll need to edit your menu script to replace any instance of .hover with .hoverIntent. I had trouble testing this in jsfiddle, but see if it works:

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src:'http://www.odzaci.rs/wp-content/themes/typo/images/down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 300}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)
            $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
            $innerheader.append(
                '<img src="'+ droplinemenu.arrowimage.src
                +'" class="' + droplinemenu.arrowimage.classname
                + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
            )

            // THIS IS THE PART I REPLACED

            var config = {    
     over: function(e){
            var $targetul=$(this).children("ul:eq(0)")
            if ($targetul.queue().length<=1) //if 1 or less queued animations
                if (this.istopheader)
                    $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
                if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                    $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                $targetul.slideDown(droplinemenu.animateduration.over)
        },
timeout: 1000, // number = milliseconds delay before onMouseOut    
out: function(e){
            var $targetul=$(this).children("ul:eq(0)")
            $targetul.slideUp(droplinemenu.animateduration.out)
        }
};

$curobj.hoverIntent( config );




        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    }) //end document.ready
}
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文