Question

我编写了一个主要隐藏的div，直到点击它展开的位置，然后在点击时再次隐藏。你可以在这里查看jsfiddle：http://jsfiddle.net/Z8vEs/1/

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

您可以在http://quintinmarcus.com/

查看我的网站以查找问题

感谢您的帮助 -Quintin

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默认为你添加该代码，因为它很常见。

Answer 2

因为'custom.js'文件是在创建<div id="about">之前加载的，所以你可能想做这样的事情：

$(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);
    }
    });

 });

Answer 3

我认为脚本末尾有一个非法字符。我把它放到控制台，它工作（我删除了角色）：

$("#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);
    }
});

代码在jsfiddle中工作，但在我的网站上不起作用

3 个答案: