Bootstrap Karussell Bremsen nach dem Schweben das Menü

Question

Ich habe ein seltsames Verhalten mit einem bestimmten Menü-Effekt mit Bootstrap Karussell auf der gleichen Seite. Grundsätzlich, wenn ich über das Menü bewegen, Bootstrap Karussell Bremsen, und geben Sie mir die folgende Fehlermeldung:

Chrome:

Cannot read property 'offsetWidth' of undefined 

Firefox:

$next[0] is undefined 

Dies ist Js Aktualisiert Code, den ich für den Effekt verwende:

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); 
}); 
}; 

Und hier ist ein codepen, die das Problem erschafft: http://codepen.io/florinsimion/pen/AXaaOK

Answer 1

Dies geschieht, weil $('li') alle li-Tags auf Ihrer Seite übereinstimmen, einschließlich der Karussell diejenigen. Sie müssen li Tags Ihres Menüs wählen:

$('ul > li').mouseover(....) 
//^ add UL as parent for all your events 

A besser Lösung, die eine spezielle Klasse für Ihr Menü verwenden würde:

current = $('.my-menu .current'); 
$('.my-menu li').mouseover(....); 
$('ul.my-menu').mouseleave(....); 
$('.my-menu .active').removeClass('active'); 

Sie Ihre CSS nicht vergessen, nehmen Sie bitte ein Blick auf diese Demo: http://codepen.io/anon/pen/AXaaap