javascript - 代码在 jsfiddle 中有效，但在我的网站上无效

Question

我编写了一个 div，该 div 大部分情况下都是隐藏的，直到单击它展开的位置，然后在单击时再次隐藏。你可以在这里查看 jsfiddle:http://jsfiddle.net/Z8vEs/1/

我在另一个网站上使用过这种方法并且它在那里工作，但由于某种原因我正在制作的新网站上没有，坦率地说我感到难过和沮丧。我不是很精通 jQuery，所以我不确定如何进行调试，所以任何建议都将不胜感激。我唯一使用的其他 jQuery 是来自 codrops 的图像 slider 的编辑版本:http://tympanus.net/codrops/2011/08/09/portfolio-image-navigation/

您可以查看我的网站以在 http://quintinmarcus.com/ 上亲自查看问题

感谢您的帮助-昆汀

Answer 1

您似乎没有在您的网站上正确加载 jQuery。

在名为 custom.js 的 javascript 文件中，您可以看到:

/* ANIMATE ABOUT BOX */
$("#about").click(function() {
    if($('#about').css('width') == '83px'){
        $('#about').animate({'width':'380px'},350);
        $('#about').animate({'height':'457px'},350);
    }
    else{
        $('#about').animate({'width':'83px'},350);
        $('#about').animate({'height':'11px'},350);
    }
});

什么时候它真的应该是这样的:

/* ANIMATE ABOUT BOX */
$(document).ready(function(){

    $("#about").click(function() {
        if($('#about').css('width') == '83px'){
            $('#about').animate({'width':'380px'},350);
            $('#about').animate({'height':'457px'},350);
        }
        else{
            $('#about').animate({'width':'83px'},350);
            $('#about').animate({'height':'11px'},350);
        }
    });
});

请注意新版本顶部和底部的 jQuery 启动脚本和结束标记。

jsfiddle 默认为您添加该代码，因为它很常见。