javascript - 移动导航在 Ajax 加载后停止工作-6ren

javascript - 移动导航在 Ajax 加载后停止工作

转载作者：行者123 更新时间：2023-11-28 04:15:17

好的，所以我在加载 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>

CSS:

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

应用程序.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');
                        }

                    }
                };
            };
        });

最佳答案

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

由于我的导航功能在初始页面加载时运行并在每次 ajax 加载时重新运行，这导致事件运行两次，因此它仅适用于所有其他链接点击.我将导航功能移到 ajax 加载脚本之外，以便它仅在初始页面加载时运行，现在可以正常运行。

关于javascript - 移动导航在 Ajax 加载后停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42513598/

文章推荐： javascript - “this”关键字如何工作？

文章推荐： javascript - 如何解析 anchor 标记中的文本？

文章推荐： html - 有没有办法隐藏表格中的列？

文章推荐： javascript - Ajax 搜索和分页相结合

html - 移动 HTML5 框架 - Jquery 移动
只是想知道 Jquery Mobile 是否足够稳定以用于实时生产企业移动应用程序。有很多 HTML5 框架，因为我们的团队使用 JQuery 已经有一段时间了，我们更愿意使用 Jquery 移动框
node.js - PUBG 移动 api - 是否存在任何返回用户信息的 pubg 移动 api
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 3 年前。 Improve t
javascript - javascript 中的拖放 - 元素可以按 x 移动，但不能按 y 移动？
所以我尝试在 JavaScript 中对元素进行拖放。我使用的视频教程在这里； https://www.youtube.com/watch?v=KTlZ4Hs5h80 。我已经按照它的说明进行了编码，
javascript - 移动 iOS 设备(移动 Chrome 和 Safari)上的 mp3 音频缓存问题
无法在移动 iOS(safari 和 chrome)上自动播放以前缓存的 mp3 音频我正在 Angular 8 中开发一个应用程序，在该应用程序的一部分中，我试图在对象数组中缓存几个传入的音频 m
Git如何检测整个文件夹已删除/移动
Git 基于内容而不是文件，所以我目前理解以下行为，但我想知道是否有特殊选项或 hack 来检测此类事情: git init mkdir -p foo/bar echo "test" foo/a.tx
移动 View 的语义ui隐藏元素
我正在寻找语义 ui 正确的类来隐藏例如移动 View 中的 DIV。在 Bootstrap 中，我们有“visible-xs”和“hidden-xs”。但是在语义ui上我只找到了“仅移动网格” 最
linux - 移动，复制文件而不使用太多内存
我正在使用 ubuntu 和想要移动或复制大文件。但是当我与其他人一起使用服务器时，我不想拥有所有内存并使其他进程几乎停止。那么有没有办法在内存使用受限的情况下移动或复制文件？最佳答案如果你
集会？ LD & 移动
这些指令有什么区别？以 ARM9 处理器为例，它不应该是: ASM: mov r0, 0 C: r0 = 0; ASM: ld r0, 0 C: r0 = 0; ? 我不知道为什么要使用一个或另一个:
php - 移动/复制和重命名最近修改的文件
我有一个文件夹，其中包含一些随机命名的文件，其中包含我需要的数据。为了使用数据，我必须将文件移动到另一个文件夹并将文件命名为“file1.xml” 每次移动和重命名文件时，它都会替换目标文件夹中以前
xcode - 移动 Storyboard中其他对象后面的对象
我经常在 IB/Storyboard 中堆叠对象，几乎不可能拖动其他对象后面的对象而不移动前面的对象。无论如何我可以移动已经选择但位于其他对象后面的对象吗？当我尝试移动它时，它总是选择顶部的对象，还是
移动 Safari 推送通知
几个月前，我看到 Safari 7 允许推送通知，它似乎是一个非常有用的工具，除了我看到的每个示例都专注于桌面浏览，而不是移动设备。 Safari 推送通知是否可以在移动设备上运行，如果没有，是否有计
c# - 移动/调整窗口大小时任务被阻止
我有一个简单的 View 模型，其中包含修改后的 ObservableCollection使用 SynchronizationContext.Current.Send在 UI 线程上执行对集合的更改。
Cassandra 移动 data_file_firectories
关于cassandra创建的数据文件和系统文件的位置，我需要移动在“cassandra.yaml”配置文件中设置的“commitlog_directory”、“data_file_directorie
javascript - 如何将浏览器选项卡标题设置为滚动/移动？
我有这个代码 $(function() { var message = 'Dont forget us'; var original; var txt1 = ' - '; $(wind
html - 页面底部奇怪的空白(移动)
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在基于 Android 的浏览器上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
javascript - 移动|克隆元素并从原始位置删除
我有这个 HTML 标记: Express 300 bsf Sign Up 我需要将元素从 DOM 上的一个
uitableview - 确定表格单元格何时开始在可能的移动操作中拖动(移动)
我有一个可重新排序的 TableView (UITableView 实例)。尽管我已经实现了 UITableViewDataSource 方法: tableView:moveRowAtIndexPat
html - 页面底部奇怪的空白(移动)
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在基于 Android 的浏览器上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
java - 如何区分importData中的复制/移动
我需要在拖放或复制/剪切和粘贴(复制与移动)期间获取操作类型。它是一个 Swing 应用程序，并且实现了 TransferHandle。我在操作结束时需要此信息，在 importData 方法中。对
java - 移动 ArrayList
我编写了一个具有 add 和 get 方法的 SortedIntList 类。我调用以下四个方法: SortedIntList mySortedIntList = new SortedIntList

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 移动导航在 Ajax 加载后停止工作