Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 让Lavalamp jQuery插件使用下拉菜单?_Javascript_Jquery_Menu_Drop Down Menu_Lavalamp - Fatal编程技术网

Javascript 让Lavalamp jQuery插件使用下拉菜单?

Javascript 让Lavalamp jQuery插件使用下拉菜单?,javascript,jquery,menu,drop-down-menu,lavalamp,Javascript,Jquery,Menu,Drop Down Menu,Lavalamp,我对这个问题有意见。它与单级菜单完美配合,但在添加下拉菜单后,它会丢失一些内容。我的意思是: 当然,我想实现的是,当用户将鼠标悬停在子项上时,lavalamp背景将保留在公文包项上 我想这是一个稍微改变插件的问题,下面是插件的完整代码。我们需要的只是一种简单的方法,当的孩子悬停在当前阶段时,让lavalamp停止,然后在之后恢复正常工作。以下是完整的插件代码供参考 (function($) { $.fn.lavaLamp = function(o) { o = $.extend({ fx: "l

我对这个问题有意见。它与单级菜单完美配合,但在添加下拉菜单后,它会丢失一些内容。我的意思是:

当然,我想实现的是,当用户将鼠标悬停在子项上时,lavalamp背景将保留在公文包项上

我想这是一个稍微改变插件的问题,下面是插件的完整代码。我们需要的只是一种简单的方法,当
  • 的孩子悬停在当前阶段时,让lavalamp停止,然后在之后恢复正常工作。以下是完整的插件代码供参考

    (function($) {
    $.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
    
    return this.each(function() {
        var me = $(this), noop = function(){},
            $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
            $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
    
        $li.not(".back").hover(function() {
            move(this);
        }, noop);
    
        $(this).hover(noop, function() {
            move(curr);
        });
    
        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });
    
        setCurr(curr);
    
        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };
    
        function move(el) {
            $back.each(function() {
                $(this).dequeue(); }
            ).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };
    
    });
    };
    })(jQuery);`
    
    (函数($){
    $.fn.lavaLamp=功能(o){
    o=$.extend({fx:“线性”,速度:500,单击:function(){},o |{});
    返回此值。每个(函数(){
    var me=$(this),noop=function(){},
    $back=$('
  • )。附录(me), $li=$($li,this),curr=$($li.current,this)[0]| |$($li[0]).addClass(“current”)[0]; $li.not(“.back”)。悬停(函数(){ 移动(这个); },noop); $(this).hover(noop,function(){ 移动(当前); }); $li.单击(功能(e){ setCurr(本); 返回o.click.apply(这个[e,这个]); }); 设置电流(电流); 函数设置电流(el){ $back.css({“left”:el.offsetLeft+“px”,“width”:el.offsetWidth+“px”}); curr=el; }; 功能移动(el){ $back.each(函数(){ $(this.dequeue();} ).制作动画({ 宽度:el.offsetWidth, 左:el.offsetLeft },o.speed,o.fx); }; }); }; })(jQuery)`

    提前感谢。

    解决方法是将lavalamp中的悬停()更改为鼠标悬停,如下页所示


    我为顶级li添加了额外的类,并更新了js:

    $li = $("li.top-level-item", this),