jquery - jQuery 菜单行为异常

Question

单击时，div 应向上移动并大部分隐藏，然后再次单击，向下移动回原始位置。是的....不是那样做的。我使用动画将 div 移动 +100px，然后 -100px，但它并没有向上移动并离开屏幕以被隐藏。相反，它向下移动，然后开始（我认为）工作。

http://jsfiddle.net/laurelrose18/LLdjh/7/

#panel {

}

.menu {
    -webkit-border-bottom-left-radius:38px;
    -webkit-border-bottom-right-radius:38ßpx;
    border-bottom-left-radius:38px;
    border-bottom-right-radius:38px;
    background: $bluejeans;
    width: 100px;
    height:300px;
    padding-bottom: 25px;
}


.menu li {

    margin-bottom: .5em;
    list-style-type: none;

}



#menubtn {
    width: 100px;
    height: auto;
    max-width: 100px;
    margin-top: -100px;
}




.active {
padding-top: 100px;
}



<div class="container">
        <div class="row slidemenu"> 
            <div class="span2 offset10">

              <div id="panel">
              <ul class="menu flexbox"> 
                <li class="smIcon">sk</li>
                <li class="smIcon">pr</li>
                <li class="smIcon">tk</li>
                <li class="hitext">menu</li>
              </ul>
            </div>

            <div id="menulogo"> 
                <a class="slidebtn" href="#"><img src="images/monogram.png" alt="menu button" id="menubtn"></a> 
              </div>

            </div>
          </div>
        </div>

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>


<script type="text/javascript">

$(document).ready(function(){

  $(".slidebtn").click(function(){
        $("#panel").toggleClass("active"); 
        $("#panel").slideToggle("slow");
        return false;
  });


});
</script>

Answer 1

我$(this).position().top + 200用. +=200px_ .animate()小提琴：http: //jsfiddle.net/LLdjh/10/

由于#panel以 开头top: 0px，因此您可以使用静态值.animate()代替。
小提琴： http: //jsfiddle.net/LLdjh/11/
jQuery：

$(function () {
    var gomenu = "open"
    $(".slidebtn").click(function () {
        if (gomenu == "open") {
            $("#panel").stop().animate({
                top: "200px"
            }, 500);
            gomenu = "close";
        } else if (gomenu == "close") {
            $("#panel").stop().animate({
                top: "0px"
            }, 500);
            gomenu = "open";
        }
    });
});