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

Menu Open & Close on menu button - Jquery

本文关键字：菜单 按钮 Jquery      更新时间：2023-09-26

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

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

像这样使用 jQuery 切换。简单。

$(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);
        }
    );
)};
相关文章：