jQuery单击切换动画

我正在尝试学习如何使用jQuery,我偶然发现了一个问题.首先,我将向您展示导致问题的代码部分.

HTML

<div id="nav">
<div id="button"><p class="scroll" onclick="location.href='#ed';">Education</p></div>
<div id="button"><p class="scroll" onclick="location.href='#wxp';">Work Experience</p></div>
<div id="button"><p class="scroll" onclick="location.href='#oact';">Other Activities</p></div>
<div id="button"><p class="scroll" onclick="window.open('cv.pdf','mywindow');">View as PDF</p></div>
<div id="arrow_container"><div class="arrow" id="down"></div></div>

jQuery的

$(document).ready(function(){
$("#arrow_container").toggle(
  function () {
    $("#nav").animate({marginTop:"0px"},200);
      },function () {
    $("#nav").animate({marginTop:"-100px"},200);
  });
});

我希望div #nav(最初位于屏幕外部)在单击div #arrow_container时向下移动.然后当再次单击#arrow_container时,我希望#nav向上移动到其原始位置.

目前,没有发生这种情况.你能告诉我问题是什么以及如何解决它吗？

编辑：a jsfiddle with the code,including some css

编辑2：问题似乎得到解决.还要感谢我忘记并回答的用户名已被删除,但他有一些很棒的提示！谢谢！

解决方法

尝试这个：

$("#arrow_container").click( function(event){
    event.preventDefault();
    if ( $(this).hasClass("isDown") ) {
        $("#nav").stop().animate({marginTop:"-100px"},200);                            
    } else {
        $("#nav").stop().animate({marginTop:"0px"},200);
    }
    $(this).toggleClass("isDown");
    return false;
});

http://jsfiddle.net/us6sohyg/5/