Ajax加载后，移动导航停止工作

时间：2017-02-28 16:08:03

标签： javascript jquery html css ajax

好吧，所以我在加载ajax后出现移动导航开放问题。当没有ajax加载时，菜单工作正常。当页面最初加载时，菜单将起作用，但在单击链接并加载新页面内容后，单击该菜单时菜单将不会打开。 （控制台中没有出现错误。）

在检查浏览器中的html代码时，我注意到由于某种原因在加载ajax后，当点击导航触发器时，它将不再将nav-open类应用于标题，而这是揭示导航的原因。

我有一种感觉，我需要的是在javascript中修复一些东西，但我不确定是什么导致它破坏。 （为了深入了解app.js，它最初为页面运行脚本的设置，然后在加载ajax后再次运行它们。所有脚本都正常运行，除了这个移动设备外，所有页面都运行完美 - 导航问题。）

任何人都可以给予我的任何帮助或见解将不胜感激。

页面模板:(内容被ajax取代）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{{ page.title }}</title>
    <meta name="viewport" content="width=device-width">

    <!-- Custom CSS -->

    <link rel="stylesheet" href="/css/main.css">
    <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">

    <script src="https://use.typekit.net/xps0dil.js"></script>
    <script>
        try {
            Typekit.load({
                async: true
            });
        } catch (e) {}
    </script>

    <script src="/js/jquery-3.1.1.min.js"></script>

</head>

<body>

    <div class="container">


        {% include header.html %}
        <div id="content">

            {{ content }}

        </div>

        {% include social.html %}

    </div>
    {% include footer.html %}

</body>

</html>

导航HTML：

<header class="cd-auto-hide-header">
    <div class="logo">
        <a href="/" class="page-link" title="home"><img src="/img/logo.svg" alt="logo" /></a>
    </div>


    <nav class="cd-primary-nav">
        <div href="#cd-navigation" class="nav-trigger">
            <span class="cd-nav-icon"></span>

            <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
    <circle fill="transparent" stroke="#fff" stroke-width="2" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
  </svg>
</div>
        <div class="cd-navigation-wrapper">
            <ul id="cd-navigation">
                <li><a href="/work" class="page-link" title="work">Work</a></li>
                <li><a href="/services" class="page-link" title="services">Services</a></li>
                <li><a href="/agency" class="page-link" title="agency">Agency</a></li>
                <li><a href="/culture" class="page-link" title="culture">Culture</a></li>
                <li><a href="/blog" class="page-link" title="blog">Blog</a></li>
                <li><a href="/contact" class="page-link" title="contact">Contact</a></li>
            </ul>
          </div>
    </nav>
</header>

SCSS：

.cd-auto-hide-header {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: $nav-height;
    background-color: #fff;
    @include clearfix;
    /* Force Hardware Acceleration */
    transform: translateZ(0);
    @include transition(transform .5s);

    &.is-hidden {
        transform: translateY(-100%);
    }
    @include media($tablet) {
        height: $nav-height;
        padding: 0;
    }
    @include media($desktop) {
        padding: 0 75px;
    }
    @include media($desktop-large) {
        padding: 0 100px;
    }
    @include media($desktop-largest) {
        padding: 0 200px;
    }
    @include media($desktop-super) {
        padding: 0 300px;
    }
    @include media($desktop) {
        height: $nav-height;
    }
}

.cd-auto-hide-header .logo {
    position: absolute;
    @include center(y);
    margin-left: 5%;
    @include media($desktop) {
        margin-left: 0;
    }
}

.logo {
    z-index: 0;

    img {
        width: 80px;
    }
}

.cd-auto-hide-header .logo {
    a,
    img {
        display: inline-block;
    }
}

.cd-auto-hide-header .nav-trigger {
    /* vertically align its content */
    span {
        /* vertically align inside parent element */
        display: table-cell;
        vertical-align: middle;
    }

    em,
    em::after,
    em::before {
        /* this is the menu icon */
        display: block;
        position: relative;
        height: 2px;
        width: 22px;
        backface-visibility: hidden;
    }

    em {
        /* this is the menu central line */
        margin: 6px auto 14px;
        transition: background-color 0.2s;
    }

    em::after,
    em::before {
        position: absolute;
        content: '';
        left: 0;
        transition: transform 0.2s;
    }

    em::before {
        /* this is the menu icon top line */
        transform: translateY(-6px);
    }

    em::after {
        /* this is the menu icon bottom line */
        transform: translateY(6px);
    }
    @include media($desktop) {
        display: none;
    }
}

.cd-auto-hide-header.nav-open .nav-trigger {
    em {
        /* transform menu icon into a 'X' icon */
        background-color: rgba(0,0,0, 0);
    }

    em::before {
        /* rotate top line */
        transform: rotate(-45deg);
    }

    em::after {
        /* rotate bottom line */
        transform: rotate(45deg);
    }
}
.nav-trigger {
    position: fixed;
    z-index:1000;
    right: 5%;
    top: 40px;
    height: 54px;
    width: 54px;
    background-color: #000;
    border-radius: 50%;
    /* image replacement */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    @include transition(transform .7s - 0.2s);
    cursor:pointer;

    .cd-nav-icon {
        /* icon created in CSS */
        position: absolute;
        @include center; // mixin inside partials > _mixins.scss
        width: 22px;
        height: 2px;
        background-color: #fff;

        &::before,
        &:after {
            /* upper and lower lines of the menu icon */
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: inherit;
            /* Force Hardware Acceleration in WebKit */
            @include transform(translateZ(0));
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            @include transition(transform .7s - 0.2s, width .7s - 0.2s, top .3s);
        }

        &::before {
            @include transform-origin(right top);
            @include transform(translateY(-6px));
        }

        &::after {
            @include transform-origin(right bottom);
            @include transform(translateY(6px));
        }
    }

    .no-touch &:hover .cd-nav-icon::after {
        top: 2px;
    }

    .no-touch &:hover .cd-nav-icon::before {
        top: -2px;
    }

    svg {
        position: absolute;
        top: 0;
        left: 0;
    }

    circle {
        /* circle border animation */
        @include transition(stroke-dashoffset .7s - 0.3s 0s);
    }

    .nav-open & {
        /* rotate trigger when navigation becomes visible */
        @include transform(rotate(360deg));
        background:#92062b;
        @include transition(background .7s);

        .cd-nav-icon::after,
        .cd-nav-icon::before {
            /* animate arrow --> from hamburger to arrow */
            width: 50%;
            @include transition(transform .7s - 0.2s, width .7s - 0.2s);
        }

        .cd-nav-icon::before {
            @include transform(rotate(45deg));
        }

        .cd-nav-icon::after {
            @include transform(rotate(-45deg));
        }

        .no-touch &:hover .cd-nav-icon::after,
        .no-touch &:hover .cd-nav-icon::before {
            top: 0;
        }

        circle {
            stroke-dashoffset: 0;
            @include transition(stroke-dashoffset .7s - 0.3s 0.3s);
        }
    }
}
.cd-primary-nav {
    display: block;
    float: right;
    height: 100%;
    @include transition(visibility 0s .7s);

    .cd-navigation-wrapper {
        height: 100vh;
        width: 100vw;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index:100;
        /* Force Hardware Acceleration in WebKit */
        @include transform(translateZ(0));
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        @include transform(translateX(100%));
        @include transition(transform .7s - 0.2s);
        @include transition-timing-function(cubic-bezier(.82,.01,.77,.78));

        @include media($desktop) {
            height: $nav-height;
            width: 100%;
            @include transform(translateX(100%));
        }

        > ul {
            z-index:1000;
            left: 0;
            width: 100%;
            margin-right: 0;
            background: $brand-color;
            height: 100vh;
            padding-top:40px;
            position:absolute;

            a {
                /* target primary-nav links */
                display: inline-block;
                height: 10vh;
                line-height: 2em;
                padding-left: 1em;
                font-size: 2em;
                text-decoration: none;
                color: #fff;

                &.active,
                &:hover {
                    color: #101010;
                }
            }
        }
        @include media($desktop) {
            /* vertically align its content */
            display: table;

            > ul {
                /* vertically align inside parent element */
                display: table-cell;
                vertical-align: middle;
                /* reset mobile style */
                position: relative;
                width: auto;
                top: 0;
                padding: 0;
                @include clearfix;
                background-color: transparent;
                box-shadow: none;
                height: $nav-height;
                @include transform(translateX(-100%));
                @include transition(transform .7s - 0.2s);

                li {
                    display: table-cell;
                    vertical-align: middle;
                    float: left;

                    &:last-of-type {
                        margin-right: 0;
                    }
                }

                a {
                    /* reset mobile style */
                    display: block;
                    border: 0;
                    height: 50px;
                    line-height: .75em;
                    padding: 20px 20px 0;
                    text-decoration: none;
                    color: #000;
                    font-size: 1.2em;
                    font-weight: $nav-font-weight;
                    @include media($desktop-largest) {
                        font-size: 1.4em;
                    }
                    @include media($desktop-super) {
                        font-size: 1.5em;
                    }
                }

                a:hover {
                    color: #000;
                }

                a::after {
                    position: relative;
                    bottom: 0;
                    left: 50%;
                    display: inline-block;
                    width: 0;
                    height: 2px;
                    content: "";
                    transition: width 0.3s ease 0s, left 0.3s ease 0s;
                    background: $dark-gray;
                }

                a:hover::after {
                    position: relative;
                    left: 0;
                    width: 100%;
                }
            }

        }

    }
    .nav-open & {
        visibility: visible;
        @include transition(visibility 0s 0s);

        .cd-navigation-wrapper {
            @include transform(translateX(0));
            @include transition(transform .7s - 0.2s);
            @include transition-timing-function(cubic-bezier(.82,.01,.77,.78));
        }
    }
}

.cd-primary-nav ul:target,
.nav-open .cd-primary-nav ul {
    /*
        show primary nav - mobile only
        :target is used to show navigation on no-js devices
    */
    display: block;
    @include media($desktop) {
        display: table-cell;
    }
}



.no-js main {
    height: auto;
    overflow: visible;
}

.no-js .cd-nav {
    position: static;
    visibility: visible;

    .cd-navigation-wrapper {
        height: auto;
        overflow: visible;
        padding: 100px 5%;
        @include transform(translateX(0));
    }
}

app.js 

$(function() {
        init = function() {
                runScripts();

            },

            ajaxLoad = function(html) {
                init();

                $("body").scrollTop(0);
            };

        init();

        //Function that loads in the new content
        var load = function(url) {
            $("#content").load(url + " #content");
        };

        $(document).on('click', 'a', function(e) {
            e.preventDefault();

            //Sets variables to be used for url and page name
            var $this = $(this),
                url = $this.attr("href"),
                title = $this.text();

            //Makes entries into browser history
            history.pushState({
                url: url,
                title: title
            }, title, url);

            document.title = title;

            load(url);

        });

        $(document).ajaxComplete(function() {
            console.log("Ajax Loaded");
            ajaxLoad();

        });
        //Enables use of back and forward buttons in browser
        $(window).on('popstate', function(e) {
            var state = e.originalEvent.state;
            if (state !== null) {
                document.title = state.title;
                load(state.url);
            } else {
                document.title = title;
                $("#content").empty();
            }
        });

        // Need to reinitialize scripts so they run when page is loaded

        function runScripts() {
            navigation();

            function navigation() {
                console.log("Navigation script running");
                var mainHeader = $('.cd-auto-hide-header'),
                    secondaryNavigation = $('.cd-secondary-nav'),

                    belowNavHeroContent = $('.sub-nav-hero'),
                    headerHeight = mainHeader.height();
                var isLateralNavAnimating = false;

                //set scrolling variables
                var scrolling = false,
                    previousTop = 0,
                    currentTop = 0,
                    scrollDelta = 10,
                    scrollOffset = 0;

                mainHeader.on('click', '.nav-trigger', function(event) {
                    // open primary navigation on mobile
                    event.preventDefault();
                    if (!isLateralNavAnimating) {
                        if ($(this).parents('.csstransitions').length >= 0) isLateralNavAnimating = true;


                        mainHeader.toggleClass('nav-open');
                        $('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
                            //animation is over
                            isLateralNavAnimating = false;
                        });
                    }
                });
                mainHeader.on('click', 'a', function(event) {
                    if (mainHeader.hasClass("nav-open")) {
                        mainHeader.toggleClass('nav-open');
                        isLateralNavAnimating = false;
                    }

                });

                $(window).on('scroll', function() {
                    if (!scrolling && !mainHeader.hasClass("nav-open")) {
                        scrolling = true;
                        (!window.requestAnimationFrame) ?
                        setTimeout(autoHideHeader, 250): requestAnimationFrame(autoHideHeader);
                    }
                });

                $(window).on('resize', function() {
                    headerHeight = mainHeader.height();
                });

                function autoHideHeader() {
                    var currentTop = $(window).scrollTop();

                    (belowNavHeroContent.length > 0) ?
                    checkStickyNavigation(currentTop) // secondary navigation below intro
                        : checkSimpleNavigation(currentTop);

                    previousTop = currentTop;
                    scrolling = false;
                };

                function checkSimpleNavigation(currentTop) {
                    //there's no secondary nav or secondary nav is below primary nav
                    if (previousTop - currentTop > scrollDelta) {
                        //if scrolling up...
                        mainHeader.removeClass('is-hidden');
                    } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
                        //if scrolling down...
                        mainHeader.addClass('is-hidden');
                    }
                };

                function checkStickyNavigation(currentTop) {
                    //secondary nav below intro section - sticky secondary nav
                    var secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();

                    if (previousTop >= currentTop) {
                        //if scrolling up...
                        if (currentTop < secondaryNavOffsetTop) {
                            //secondary nav is not fixed
                            mainHeader.removeClass('is-hidden');
                            secondaryNavigation.removeClass('fixed slide-up');
                            belowNavHeroContent.removeClass('secondary-nav-fixed');
                        } else if (previousTop - currentTop > scrollDelta) {
                            //secondary nav is fixed
                            mainHeader.removeClass('is-hidden');
                            secondaryNavigation.removeClass('slide-up').addClass('fixed');
                            belowNavHeroContent.addClass('secondary-nav-fixed');
                        }

                    } else {
                        //if scrolling down...
                        if (currentTop > secondaryNavOffsetTop + scrollOffset) {
                            //hide primary nav
                            mainHeader.addClass('is-hidden');
                            secondaryNavigation.addClass('fixed slide-up');
                            belowNavHeroContent.addClass('secondary-nav-fixed');
                        } else if (currentTop > secondaryNavOffsetTop) {
                            //once the secondary nav is fixed, do not hide primary nav if you haven't scrolled more than scrollOffset
                            mainHeader.removeClass('is-hidden');
                            secondaryNavigation.addClass('fixed').removeClass('slide-up');
                            belowNavHeroContent.addClass('secondary-nav-fixed');
                        }

                    }
                };
            };
        });

1 个答案:

答案 0 :(得分：0)

感谢Shilly和Andrei Gheorghiu，我设法解决了这个问题。

由于我的导航功能在初始页面加载时运行并且在每次ajax加载时重新运行，因此导致事件运行两次，因此它只与其他所有链接一起使用。我将导航功能移到了ajax加载脚本之外，这样它只能在初始页面加载时运行，现在它可以正常运行。

相关问题
最新问题