Javascript Ajax加载后，移动导航停止工作
好吧，我在加载ajax后打开移动导航时遇到了一个问题。在没有ajax加载的情况下，菜单可以完美地工作。当页面最初加载时，菜单将工作，但在单击链接并加载新页面内容后，当我单击它时，菜单将不会重新打开。（控制台中没有出现错误。） 在浏览器中查看html代码时，我注意到，由于某种原因，在加载ajax后，当单击导航触发器时，它将不再将nav open类应用于标题，这就是显示导航的原因 我有一种感觉，我所需要的只是修复javascript中的一些东西，但我不确定是什么导致它崩溃。（为了深入了解app.js，它的设置是首先运行页面的脚本，然后在加载ajax后再次运行它们。除此移动导航问题外，所有脚本都正常运行，页面都运行良好。） 如果有人能给我任何帮助或见解，我将不胜感激 页面模板：（内容被ajax取代） app.jsJavascript Ajax加载后，移动导航停止工作,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,好吧，我在加载ajax后打开移动导航时遇到了一个问题。在没有ajax加载的情况下，菜单可以完美地工作。当页面最初加载时，菜单将工作，但在单击链接并加载新页面内容后，当我单击它时，菜单将不会重新打开。（控制台中没有出现错误。） 在浏览器中查看html代码时，我注意到，由于某种原因，在加载ajax后，当单击导航触发器时，它将不再将nav open类应用于标题，这就是显示导航的原因 我有一种感觉，我所需要的只是修复javascript中的一些东西，但我不确定是什么导致它崩溃。（为了深入了解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');
}
}
};
};
});
$（函数（）{
init=函数（）{
runScripts（）；
},
ajaxLoad=函数（html）{
init（）；
$（“正文”）.scrollTop（0）；
};
init（）；
//在新内容中加载的函数
var load=函数（url）{
$（“#内容”）.load（url+“#内容”）；
};
$（文档）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
//设置用于url和页面名称的变量
变量$this=$（this），
url=$this.attr（“href”），
title=$this.text（）；
//在浏览器历史记录中创建条目
历史，国家({
url:url，
标题：标题
}，标题，网址）；
document.title=标题；
加载（url）；
});
$（文档）.ajaxComplete（函数（）{
log（“加载了Ajax”）；
ajaxLoad（）；
});
//允许在浏览器中使用后退和前进按钮
$（窗口）.on（'popstate'，函数（e）{
var state=e.originalEvent.state；
如果（状态！==null）{
document.title=state.title；
加载（state.url）；
}否则{
document.title=标题；
$（“#内容”）.empty（）；
}
});
//需要重新初始化脚本，以便在加载页面时运行脚本
函数runScripts（）{
导航（）；
函数导航（）{
log（“正在运行的导航脚本”）；
var mainHeader=$（'.cd自动隐藏标头'），
次要导航=$（'.cd次要导航'），
belowNavHeroContent=$（'.sub-nav-hero'），
headerHeight=主收割台高度（）；
var islateralnavianing=false；
//设置滚动变量
var scrolling=false，
previousTop=0，
currentTop=0，
滚动增量=10，
scrollOffset=0；
mainHeader.on（'click'，'nav trigger'，函数（事件）{
//在手机上打开主导航
event.preventDefault（）；
如果（！正在设置动画）{
如果（$（this）.parents（'.cstranitions'）.length>=0）IsLaternalNavAnimating=true；
mainHeader.toggleClass（'nav-open'）；
$（'.cd导航包装器'）.one（'WebKittrantionEnd otransonEnd otransonEnd otransonEnd MSTransformationEnd MSTransformationEnd'，函数（）{
//动画结束了
Islateral NavAnimating=假；
});
}
});
mainHeader.on（'click'，'a'，函数（事件）{
if（mainHeader.hasClass（“导航打开”））{
mainHeader.toggleClass（'nav-open'）；
Islateral NavAnimating=假；
}
});
$（窗口）.on（'scroll'，function（）{
如果（！scrolling&&！mainHeader.hasClass（“导航打开”））{
滚动=真；
（！window.requestAnimationFrame）？
setTimeout（autoHideHeader，250）：requestAnimationFrame（autoHideHeader）；
}
});
$（窗口）.on（'resize'，function（））{
headerHeight=主收割台高度（）；
});
函数自动隐藏头（）{
var currentTop=$（窗口）.scrollTop（）；
（低于avherocontent.length>0）？
checkStickyNavigation（currentTop）//介绍下面的辅助导航
：选中Simplenavigation（当前顶部）；
previousTop=当前Top；
滚动=假；
};
函数检查简化激活（currentTop）{
//没有辅助导航或辅助导航低于主导航
如果（上一个顶部-当前顶部>滚动增量）{
//如果向上滚动。。。
removeClass（'is-hidden'）；
}else if（currentTop-previousTop>scrollDelta&¤tTop>scrollOffset）{
//如果向下滚动。。。
mainHeader.addClass（'is-hidden'）；
}
};
功能检查粘滞导航（currentTop）{
//介绍部分下方的辅助导航-粘性辅助导航
var secondaryNavOffsetTop=belowNavHeroContent.offset（）.top
<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>
.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));
}
}
$(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');
}
}
};
};
});