Question

每当我在1个网站上有2个Owl-Carousel时，我的汉堡包菜单就不再有用了。

我使用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>

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

Owl Carousel（它与汉堡菜单/标题功能相同）：

;(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个Carousel（无关紧要）时，我的汉堡包菜单会再次运作。

Answer 1

我找到了答案！

你必须添加＆＃34; owl-carousel＆＃34;在旋转木马上课。

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

Owl Carousel与我的javascript冲突

1 个答案: