javascript - 悬停菜单后 Bootstrap 轮播制动器

Question

我在同一页面中使用带有 Bootstrap 轮播的特定菜单效果时出现奇怪的行为。基本上，如果我将鼠标悬停在菜单上，Bootstrap 旋转木马就会停止，并出现以下错误:

Chrome :

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

这是重现问题的代码笔: http://codepen.io/florinsimion/pen/AXaaOK

Answer 1

发生这种情况是因为 $('li') 将匹配您页面上的所有 li 标签，包括轮播标签。您需要选择菜单的 li 标签:

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

更好的解决方案是为您的菜单使用特定的类:

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

不要忘记你的 CSS，请看看这个演示:http://codepen.io/anon/pen/AXaaap