Question

我目前正在使用Wordpress上的公司网站，该网站上有一个导航菜单，可以在通过jQuery load()功能淡入后无缝加载链接的内容。像这样：

$("#header .menu a, #header .logo, nav.menu_mobile a:not('.close')").bind('click',function () {

var href = $(this).attr("href");
var title = $(this).attr("title");

history.pushState(null, title, href);

$("#page").fadeOut(500, function() {
    $("#page").delay(500).empty();
    $(window).scrollTop(0);
    $("#header").removeClass("scrolled");
});

$('#page').load(href + " .content", function() {
    $('#page').fadeIn(500, function(){

        if ( $("#main").has(".posts") ) {
            setTimeout(function() {
                masonrygrid();
            }, 1000);
        }

        setTimeout(function() {
            $("body").getNiceScroll().resize();
        }, 500);

    });
});

return false;
});

目前，我在执行＆＃34;工作＆＃34;页面，基本上是一个投资组合页面。

当点击帖子并且帖子中的所有图像都会显示在模态框上时，应该有一个模式框可以淡入。

当＆＃34;工作＆＃34;通过地址栏访问页面，功能（如下所示）可以正常工作。但是，当通过导航菜单访问页面时，该功能无法正常工作。

$(".page-id-44 .post .meta").click(function() {
    $("#gallery").fadeIn();
    return false;
});

$("#gallery .close").click(function() {
    $("#gallery").fadeOut();
    return false;
});

演示：trivecs.com（仍在建设中）

Answer 1

使用Wordpress，您只需使用jQuery(document).ready(function($){ });

然后在其中的所有内容，你可以像往常一样使用$。

Answer 2

首先，默认情况下，$不会在WordPress中工作。因为，WordPress提供的jQuery处于noConflict模式，以避免与可能使用$作为对象引用的其他库的问题。

所以将你的所有jquery代码包装在里面。

(function($){
    // your code here
})(jQuery)

更新

如果jQuery的问题（$不是函数），上面的代码将会起作用。如果还有其他问题，请从控制台发布有问题的错误。

UPDATE2：

我在您的网站上发现了这个问题：更改工作页面的代码，如下所示。

它的事件授权。当页面加载时，您的DOM中没有这些类，因此当您通过导航导航时，您将动态添加这些类。所以事件委托是针对document中的动态类。 See this link

$(document).on('click', ".page-id-44 .post .meta", function() {
    $("#gallery").fadeIn();
    return false;
});

$(document).on('click', "#gallery .close", function() {
    $("#gallery").fadeOut();
    return false;
});

Answer 3

试试这个：

jQuery(document).ready(function( $ ) {
    // $ Works! You can test it with next line if you like
    // console.log($);
});

Answer 4

尝试所有“$”的jQuery。

jQuery("#header .menu a, #header .logo, nav.menu_mobile a:not('.close')").bind('click',function () {

var href = jQuery(this).attr("href");
var title = jQuery(this).attr("title");

history.pushState(null, title, href);

jQuery("#page").fadeOut(500, function() {
    jQuery("#page").delay(500).empty();
    jQuery(window).scrollTop(0);
    jQuery("#header").removeClass("scrolled");
});

jQuery('#page').load(href + " .content", function() {
    jQuery('#page').fadeIn(500, function(){

        if ( jQuery("#main").has(".posts") ) {
            setTimeout(function() {
                masonrygrid();
            }, 1000);
        }

        setTimeout(function() {
            jQuery("body").getNiceScroll().resize();
        }, 500);

    });
});

return false;
});

如何在导航中解决jQuery淡入淡出动画冲突？

4 个答案:

更新

UPDATE2：