代码之家  ›  专栏  ›  技术社区  ›  HenThai

Owl旋转木马与我的javascript冲突

  •  0
  • HenThai  · 技术社区  · 7 年前

    每当我在一个网站上有2个猫头鹰旋转木马时,我的汉堡包菜单就不起作用了。

    我用过 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旋转木马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 回复  |  直到 7 年前
        1
  •  0
  •   HenThai    7 年前

    我找到了答案!

    您必须在旋转木马上添加“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>
    

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

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