Javascript 让Lavalamp jQuery插件使用下拉菜单?
我对这个问题有意见。它与单级菜单完美配合,但在添加下拉菜单后,它会丢失一些内容。我的意思是: 当然,我想实现的是,当用户将鼠标悬停在子项上时,lavalamp背景将保留在公文包项上 我想这是一个稍微改变插件的问题,下面是插件的完整代码。我们需要的只是一种简单的方法,当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停止,然后在之后恢复正常工作。以下是完整的插件代码供参考
(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),