jQuery 动画点击时出现问题 - 需要两次 + 错误效果

Question

所以我试图制作一个导航栏，当您单击按钮/跨度时，会出现一个 div，从顶部到导航栏正下方。但是，当我点击 'Homer' 时，首先没有任何反应，但我第二次点击时，它出现了另一种效果，我没有在任何地方使用过。 [我不知道效果的名称，但 div 出现在它自己的左上角。]

这就是我想要的：

当我点击导航栏中的'Homer'时，一个div从off body到on body。 div 必须移动到导航栏下方的 0px，因此导航栏底部和 div(hidden-homer) 顶部之间没有 space。当我再次点击 Homer 时，div(hidden-homer) 必须再次离开屏幕，因此向上移动。

在 JSFiddle 中，它根本不起作用...

Firefox 控制台中没有错误，1 个警告：“不推荐使用 getPreventDefault()。请改用 defaultPrevented。”
JSHint (JSFiddle) 中没有错误

所以 2 个问题：

当我点击 'Homer' 时，没有任何反应。
当我第二次点击 'Homer' - 没有重新加载页面 - div 在错误的位置出现错误的效果（在导航栏下方，所以你看不到一部分）。

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
    <script src="jquery.js"></script>
    <title></title>
    <meta charset="UTF-8">
</head>

<body>

    <div id="nav">
        <span>Homer</span>
        <span>Marge</span>
        <span>Bart</span>
        <span>Lisa</span>       
        <span>Maggie</span>
    </div>

    <div id="hidden-homer" class="hidden">
        <h1>Homer</h1>
        <p>Text</p>
    </div>

        <div id="hidden-marge" class="hidden">
        <h1>Marge</h1>
        <p>Text</p>
    </div>

    <div id="hidden-bart" class="hidden">
        <h1>Bart</h1>
        <p>Text</p>
    </div>

        <div id="hidden-lisa" class="hidden">
        <h1>Lisa</h1>
        <p>Text</p>
    </div>

    <div id="hidden-maggie" class="hidden">
        <h1>Maggie</h1>
        <p>Text</p>
    </div>

    <div id="intro">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/The_Simpsons_Logo.svg/300px-The_Simpsons_Logo.svg.png">  
    </div>

jQuery:

    <script>
    var main = function() {
        $('#nav span:nth-child(1)').click(function() {
            $('#hidden-homer').toggle(function() {
                $(this).animate({top: '70px'}, 100);
                }, function() {
                    $(this).animate({top: '-70px'}, 100);
                });
        });
    };
    $(document).ready(main);
    </script>

CSS:

    body {
    background-color: #0040FF;
    padding: 0px;
    margin: 0px;
}

a {
    outline: none;
}

#nav {
    height: 70px;
    line-height: 70px;
    background-color: #FFBF00;
    font-size: 0px;
    text-decoration: none;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    margin-bottom: none;
    z-index: 1;
}

#nav span {
    display: inline-block;
    font-size: 35px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    border-right: 3px solid #0040FF;
    height: 70px;
    cursor: pointer;
    color: #0040FF;
    text-decoration: none;
    font-weight: bold;
}

#nav span:first-child {
    border-left: 3px solid #0040FF;
}

#nav span:hover {
    background-color: #0040FF;
    color: #FFBF00;
}

.hidden {
    width: 100%;
    height: 200px;
    padding-left: 30px;
    background-color: #1C1C1C;
    color: red;
    font-size: 10px;
    top: -250px;
    position: absolute;
    z-index: -1;
    border: 2px solid black;
}

img {
    height: 200px;
    width: 400px;
    transform: rotate(10deg);
}

Answer 1

使用变量来跟踪每次单击导航栏中的元素时 DIV 必须移动的方向。

var up = true;
$("#nav span:nth-child(1)").click(function() {
    $("#hidden-homer").animate({
        top: up ? "-70px" : "70px"
    }, 100);
    up = !up;
});

jQuery 动画点击时出现问题 - 需要两次 + 错误效果

Problems with jQuery Animating At Click - Twice needed + Wrong effect

jquery

html

css

jquery-animate

navigationbar