的jQuery的slideToggle的位置

Question

我有一个菜单div来把里面

// here is the javascript/jquery 
 

 
$('#menu-tab').click(function(){ 
 
    $("#menu").slideToggle("normal"); 
 
});

/* for the css */ 
 

 
    #menu { 
 
     width: 220px; 
 
     border: 2px solid #004990; 
 
     float: right; 
 
     margin-right: 15px; 
 
     margin-top: -52px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 
    <!--menu--> 
 
\t \t <a href="#"><div id="menu-tab">Menu</div></a> 
 
\t \t <div id="menu"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">a</a></li> 
 
\t \t \t \t <li><a href="#">b</a></li> 
 
\t \t \t \t <li><a href="#">c</li> 
 
\t \t \t </ul> 
 
\t \t </div>

监守边距菜单列表：-52px;（我控制在页面菜单位置），因此每当我点击菜单标签时，#menu将从-52px滑动。我如何让它从0px滑动？

Answer 1

您是否尝试在动画之前修改样式？在滑动之前将边缘顶部设置为零。

$('#menu-tab').click(function(){ 
    $("#menu").css("margin-top","0px"); //this should set your menudiv to margin-top:0px 
    $("#menu").slideToggle("normal"); 
});