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-->
		<a href="#"><div id="menu-tab">Menu</div></a>
		<div id="menu">
			<ul>
				<li><a href="#">a</a></li>
				<li><a href="#">b</a></li>
				<li><a href="#">c</li>
			</ul>
		</div>

因为margin-top: -52px;（我控制菜单在页面中的位置），所以每次点击菜单标签时，#menu都会从-52px滑动。如何让它从 0px 滑动？

Answer 1

您是否尝试过在制作动画之前修改样式？在滑动之前将 margin-top 设置为零。

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