javascript - 菜单打开和关闭菜单按钮-Jquery

我正在尝试创建一个滑出菜单，该菜单在相同的标签上打开一个关闭窗口。我放在一起，但是它贯穿整个动画，而不是在打开后暂停。

的HTML

<header>
    <nav>
        <ul class="slide-menu">
            <li class="menu-element"><a href="#" id="aboutopen">How tall?</a></li>
            <li class="menu-element"><a href="#book">Books</a></li>
            <li class="menu-element"><a href="weblink" target="_blank">Journal</a></li>
            <li class="menu-element"><a href="#" id="aboutcontact">Contact</a></li>
        </ul>
        <a id="puller" href="#">Menu</a>
    </nav>
</header>

jQuery的

$(document).ready(function()
  {
   $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '+=360px'
}, 500);
 });

 $("#puller").click(function(){
   $(".slide-menu").animate({
   marginLeft: '-=360px'
 }, 500);
 });


});

有人能帮忙吗？

最佳答案

使用jQuery切换是一个好主意。您也可以简单地维护菜单状态，以了解是否已经滑出菜单并采取这样的操作

$(document).ready(function(){

   var slide = false;
   $("#puller").click(function(){

   if(slide){
        $(".slide-menu").animate({marginLeft: '-=360x'}, 500);
        slide = false;
   }else{
       $(".slide-menu").animate({marginLeft: '+=360px'}, 500);
        slide = true
   }
   });

});

关于javascript - 菜单打开和关闭菜单按钮-Jquery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19965954/