Owl Carousel 与我的 javascript 冲突

Question

每当我在 1 个站点上有 2 个 Owl-Carousel's 时，我的汉堡菜单就不再起作用了。

我使用flew 作为我网站的基础。它使用 jQuery v2.1.4。

标题 HTML：

<header class="navbar navbar-default navbar-custom navbar-fixed-top affix" role="banner">
<div class="container">
    <div class="header-inner">
        <nav role="navigation">
            <ul>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
            </ul>
        </nav>
    </div>
</div>

猫头鹰轮播 HTML：

<div>
    <div class="container"> <!-- Owl Carousel 1 -->
        <div class="row">
            <div class="owl-carousel-one">
                <div> <!-- content --> </div>
                <div> <!-- content --> </div>
            </div>
        </div>  
    </div>

    <div class="container"> <!-- Owl Carousel 2 -->
        <div class="row">
            <div class="owl-carousel-two">
                <div> <!-- content --> </div>
                <div> <!-- content --> </div>
            </div>
        </div>  
    </div>
</div>

汉堡菜单/页眉JS：

;(function () {
var mobileMenuOutsideClick = function() {

    $(document).click(function (e) {
    var container = $("#tsj-offcanvas, .js-tsj-nav-toggle");
    if (!container.is(e.target) && container.has(e.target).length === 0) {

        if ( $('body').hasClass('offcanvas-visible') ) {

            $('body').removeClass('offcanvas-visible');
            $('.js-tsj-nav-toggle').removeClass('active');

        }


    }
    });

};


var offcanvasMenu = function() {
    $('body').prepend('<div id="tsj-offcanvas" />');
    $('#tsj-offcanvas').prepend('<ul id="tsj-side-links">');
    $('body').prepend('<a href="#" class="js-tsj-nav-toggle tsj-nav-toggle"><i></i></a>');
    $('#tsj-offcanvas').append($('#tsj-header nav').clone());
};


var burgerMenu = function() {

    $('body').on('click', '.js-tsj-nav-toggle', function(event){
        var $this = $(this);

        $('body').toggleClass('tsj-overflow offcanvas-visible');
        $this.toggleClass('active');
        event.preventDefault();

    });

    $(window).resize(function() {
        if ( $('body').hasClass('offcanvas-visible') ) {
        $('body').removeClass('offcanvas-visible');
        $('.js-tsj-nav-toggle').removeClass('active');
       }
    });

    $(window).scroll(function(){
        if ( $('body').hasClass('offcanvas-visible') ) {
        $('body').removeClass('offcanvas-visible');
        $('.js-tsj-nav-toggle').removeClass('active');
       }
    });
};
}());

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
});

猫头鹰轮播（与汉堡菜单/标题功能相同）：

;(function () {

var oneCarousel = function(){
    var owl = $('.owl-carousel-one');
    owl.owlCarousel({
        loop:true,
        margin:0,
        autoHeight:true,
        smartSpeed: 500,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
            },
            1000:{
                items:1,
                nav:false,
                dots: true,
            }
        }
    });
};


$(function(){
    fullHeight();
    sliderMain();
    centerBlock();
    responseHeight();
    mobileMenuOutsideClick();
    offcanvasMenu();
    burgerMenu();
    toggleBtnColor();
    contentWayPoint();
    oneCarousel();
});


var twoCarousel = function(){
    var owl = $('.owl-carousel-two');
    owl.owlCarousel({
        loop:true,
        margin:0,
        autoHeight:false,
        smartSpeed: 500,
        responsiveClass:true,
        responsive:{
            0:{
                items:1,
            },
            1000:{
                items:1,
                nav:false,
                dots: true,
            }
        }
    });
};


$(function(){
    fullHeight();
    sliderMain();
    centerBlock();
    responseHeight();
    mobileMenuOutsideClick();
    offcanvasMenu();
    burgerMenu();
    toggleBtnColor();
    contentWayPoint();
    twoCarousel();
});

}());

这也是我点击汉​​堡菜单时收到的错误消息：

main.js:249 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:249)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)

编辑：每当我删除 1 个轮播（不管是哪一个）时，我的汉堡菜单都会再次起作用。

Answer 1

我找到了答案！

您必须在轮播中添加“owl-carousel”类。

<div>
<div class="container"> <!-- Owl Carousel 1 -->
    <div class="row">
        <div class="owl-carousel owl-carousel-one">
            <div> <!-- content --> </div>
            <div> <!-- content --> </div>
        </div>
    </div>  
</div>

<div class="container"> <!-- Owl Carousel 2 -->
    <div class="row">
        <div class="owl-carousel owl-carousel-two">
            <div> <!-- content --> </div>
            <div> <!-- content --> </div>
        </div>
    </div>  
</div>

AND我犯了两次启动相同功能的错误。

$(function(){
    fullHeight();
    sliderMain();
    centerBlock();
    responseHeight();
    mobileMenuOutsideClick();
    offcanvasMenu();
    burgerMenu();
    toggleBtnColor();
    contentWayPoint();
    oneCarousel();
});

$(function(){
    fullHeight();
    sliderMain();
    centerBlock();
    responseHeight();
    mobileMenuOutsideClick();
    offcanvasMenu();
    burgerMenu();
    toggleBtnColor();
    contentWayPoint();
    twoCarousel();
});

你需要融合它们：

$(function(){
    fullHeight();
    sliderMain();
    centerBlock();
    responseHeight();
    mobileMenuOutsideClick();
    offcanvasMenu();
    burgerMenu();
    toggleBtnColor();
    contentWayPoint();
    oneCarousel();
    twoCarousel();
});