Question

点击后，div应向上移动并大部分隐藏，然后再次单击，向下移动到原始位置。是的......它不是那样做的。我使用animate来移动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";
        }
    });
});

jQuery菜单行为奇怪

1 个答案: