8

我正在尝试学习如何使用 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);
  });
});

我希望#nav最初部分位于屏幕外部的 div 在单击 div 时向下移动#arrow_container。然后#arrow_container再次单击时，我想#nav向上移动到其原始位置。

目前，没有这种情况发生。您能告诉我问题是什么以及如何解决吗？

编辑：一个带有代码的 jsfiddle，包括一些 css

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

4

2 回答 2

15

试试这个：

$("#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/

于 2013-03-12T18:57:26.910 回答
4

对我来说，这不是 100% 我必须在每次动画之前编辑一个 stop() 事件。所以：

$("#arrow_container").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
    $("#nav").stop().animate({marginTop:"0px"}, 200);          
    $(this).removeClass("isDown");
} else {
    $("#nav").stop().animate({marginTop:"-100px"}, 200);   
    $(this).addClass("isDown");
}
return false;
});
于 2013-09-06T15:24:21.210 回答