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

Question

我正在尝试创建一个滑出菜单，在同一个标​​签上打开一个关闭。我已经把一些东西放在一起，但是它贯穿整个动画而不是在打开后暂停。

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


});

有人能帮忙吗？

Answer 1

使用 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
   }
   });

});

Answer 2

像这样使用 jQuery Toggle。简单的。

$(document).ready(function() {
    var menu = $('.slide-menu');
    var speed = 500; // set animation speed

    $('#puller').toggle(
        function(){
            menu.animate({
                marginLeft: '+=360px'
            }, speed);
        },
        function(){
            menu.animate({
                marginLeft: '-=360px'
            }, speed);
        }
    );
)};