的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"); 
});