我一直在做一个设计,它在HTML中工作得很好,但在WordPress中使用时,jQuery存在巨大的冲突。
这是整个剧本。js文件优先:
jQuery(document).ready(function($) {
/* Parallax */
$(\'.intro\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/intro.jpg\', bleed: \'10\'});
$(\'.social\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/social.jpg\', bleed: \'10\'});
$(\'.separator\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/separator.jpg\', bleed: \'10\'});
$(\'.subscribe\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/subscribe.jpg\', bleed: \'10\'});
$(\'.testimonials\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/testimonials.jpg\', bleed: \'10\'});
$(\'.contact\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/contact.jpg\', bleed: \'10\'});
$(\'.archive-header\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/blog.jpg\'});
$(\'.post-header\').parallax({imageSrc: \'file:///C:/Users/Hardeep%20PC/Desktop/yeah-me/assets/images/blog.jpg\'});
/* SMOOTH SCROLL */
jQuery(\'a[href*=#]\').click(function() {
if (location.pathname.replace(/^\\//,\'\') == this.pathname.replace(/^\\//,\'\') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery(\'[name=\' + this.hash.slice(1) +\']\');
if (target.length) {
jQuery(\'html,body\').animate({
scrollTop: target.offset().top
}, 1200);
return false;
}
}
});
/* Apply matchHeight to match services grid */
var byRow = $(\'body\').hasClass(\'pmenu-push\');
$(\'.col-md-12\').each(function() {
$(this).children(\'.service-box\').matchHeight(byRow);
});
$(\'.col-md-12\').each(function() {
$(this).children(\'.blog-item\').matchHeight(byRow);
});
/* Skillbar animation speed */
jQuery(\'.skillbar\').each(function(){
jQuery(this).find(\'.skillbar-bar\').animate({
width:jQuery(this).attr(\'data-percent\')
},6000);
});
/* Enable Portfolio Grid */
Grid.init();
/* Enable Swiper for Testimonials */
var mySwiper = new Swiper (\'.swiper-container\', {
loop: true,
autoplay:10000
})
/* Enable Slideout Menu */
var menuLeft = document.getElementById( \'pmenu\' ),
showLeftPush = document.getElementById( \'showLeftPush\' ),
hideLeftPush = document.getElementById( \'hideLeftPush\' ),
body = document.body;
showLeftPush.onclick = function() {
classie.toggle( this, \'active\' );
classie.toggle( body, \'pmenu-push-toright\' );
if (classie.has(showLeftPush,"fa-bars")) {
classie.remove(showLeftPush,"fa-bars");
classie.add(showLeftPush,"fa-times");
} else {
classie.add(showLeftPush,"fa-bars");
}
classie.toggle( menuLeft, \'pmenu-open\' );
disableOther( \'showLeftPush\' );
};
hideLeftPush.onclick = function() {
classie.toggle( this, \'active\' );
classie.toggle( body, \'pmenu-push-toright\' );
classie.toggle( menuLeft, \'pmenu-open\' );
disableOther( \'hideLeftPush\' );
classie.add(showLeftPush,"fa-bars");
};
function disableOther( button ) {
if( button !== \'showLeftPush\' ) {
classie.toggle( showLeftPush, \'disabled\' );
}
}
});
如果我从文件中删除下面的代码,这将使公文包工作正常:
/* Enable Portfolio Grid */
Grid.init();
以及如何避免这种情况的建议:)
谢谢你的帮助!