0
我有一個奇怪的行爲,使用Bootstrap旋轉木馬在一個頁面中的某個菜單效果。 基本上,如果我將鼠標懸停在菜單,引導旋轉木馬剎車,給我下面的錯誤:懸停菜單後,Bootstrap旋轉木馬剎車
鉻:
Cannot read property 'offsetWidth' of undefined
火狐:
$next[0] is undefined
這是更新 JS的代碼我正在使用的效果:
var marker = $('#marker'),
current = $('.current');
// Initialize the marker position and the active class
current.addClass('active');
marker.css({
// Place the marker in the middle of the border
bottom: -(marker.height()/2),
left: current.position().left,
width: current.outerWidth(),
display: "block"
});
if (Modernizr.csstransitions) {
console.log("using css3 transitions");
$('li.list').mouseover(function() {
var self = $(this),
offsetLeft = self.position().left,
// Use the element under the pointer OR the current page item
width = self.outerWidth() || current.outerWidth(),
// Ternary operator, because if using OR when offsetLeft is 0, it is considered a falsy value, thus causing a bug for the first element.
left = offsetLeft == 0 ? 0 : offsetLeft || current.position().left;
// Play with the active class
$('.active').removeClass('active');
self.addClass('active');
marker.css({
left: left,
width: width,
});
});
// When the mouse leaves the menu
$('ul.UlList').mouseleave(function() {
// remove all active classes, add active class to the current page item
$('.active').removeClass('active');
current.addClass('active');
// reset the marker to the current page item position and width
marker.css({
left: current.position().left,
width: current.outerWidth()
});
});
} else {
console.log("using jquery animate");
$('li.list').mouseover(function() {
var self = $(this),
offsetLeft = self.position().left,
// Use the element under the pointer OR the current page item
width = self.outerWidth() || current.outerWidth(),
// Ternary operator, because if using OR when offsetLeft is 0, it is considered a falsy value, thus causing a bug for the first element.
left = offsetLeft == 0 ? 0 : offsetLeft || current.position().left;
// Play with the active class
$('.active').removeClass('active');
self.addClass('active');
marker.stop().animate({
left: left,
width: width,
}, 300);
});
// When the mouse leaves the menu
$('ul.UlList').mouseleave(function() {
// remove all active classes, add active class to the current page item
$('.active').removeClass('active');
current.addClass('active');
// reset the marker to the current page item position and width
marker.stop().animate({
left: current.position().left,
width: current.outerWidth()
}, 300);
});
};
這裏是再現這一問題的codepen: http://codepen.io/florinsimion/pen/AXaaOK
謝謝你的回答...我已經更新了我的筆,但問題依然存在。 –
請看看這個演示http://codepen.io/anon/pen/AXaaap你需要爲所有菜單選擇器+ CSS做到這一點! –
這解決了我的問題。非常感謝你! –