求助：如何实现菜单Toggle Animate切换？点击返回动画失效

原代码的问题 #

• 每次点击按钮都固定执行滑出动画，没有判断菜单当前的显示/隐藏状态，无法触发返回逻辑
• 动画回调中的$(this)指向#menu元素，它没有下一个兄弟元素，所以$(this).next('#menu')找不到目标，回调里的代码完全无效
• 动画参数的数值缺少单位，和CSS中定义的-50%不统一，可能导致动画异常

修复后的代码 #

JavaScript

$(function() {
  $('button').click(function() {
    const $menu = $(this).next('#menu');
    // 判断当前菜单状态：隐藏则滑出，显示则滑回
    if ($menu.css('margin-left') === '-50%') {
      $menu.animate({'margin-left': '0%'});
    } else {
      $menu.animate({'margin-left': '-50%'});
    }
  })
})

CSS

#menu {
  font-weight: 700;
  margin-left: -50%;
  /* 可选：加过渡让动画更流畅，和jQuery animate兼容 */
  transition: margin-left 0.3s;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button>Show Menu</button>
<div id="menu">
Lorem ipsum dolor sit amet
</div>

逻辑说明 #

• 点击按钮时先获取菜单元素，通过margin-left值判断当前状态
• 隐藏状态（-50%）时执行动画滑到0%显示，显示状态时滑回-50%隐藏
• CSS的transition是可选配置，jQuery的animate本身已能处理动画，添加后可让样式逻辑更统一

内容的提问来源于stack exchange，提问作者abcid d