드롭 다운 메뉴와 함께 작동하기 위해 Lavalamp JQuery 플러그인을 얻으십니까?
-
18-09-2019 - |
문제
나는 문제가있다 jQuery lavalamp 플러그인. 단일 레벨 메뉴와 완벽하게 작동하지만 드롭 다운을 추가 한 후 약간 손실됩니다. 내가 의미하는 바는 다음과 같습니다. http://screenr.com/0fs.
물론 내가 달성하고자하는 것은 사용자가 하위 항목을 가리킬 때 Lavalamp 배경이 포트폴리오 항목에 머무르는 것입니다.
플러그인을 약간 변경하는 것이 문제라고 생각합니다. 따라서 플러그인의 전체 코드는 다음과 같습니다. 필요한 것은 현재 단계에서 lavalamp를 멈추게하는 간단한 방법입니다. <li>
아이들의 아이들은 맴돌고 나서 정상적으로 일하는 것으로 돌아갑니다. 참조 용 전체 플러그인 코드는 다음과 같습니다.
(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);`
미리 감사드립니다.
해결책
이에 대한 수정은 다음 페이지에서 표시되는대로 Lavalamp의 Hover ()를 마우스 오버로 변경하는 것입니다.
다른 팁
최상위 LI에 추가 클래스를 추가하고 JS를 업데이트했습니다.
$li = $("li.top-level-item", this),
제휴하지 않습니다 StackOverflow