首次使用jQuery时slideToggle动画不生效，移动端菜单显隐功能异常如何解决

• 1. jQuery选择器语法错误
     你当前写的$('mainMenu')是匹配页面中<mainMenu>标签元素，若你的菜单是id为mainMenu，需要改为$('#mainMenu')；若为class则改为$('.mainMenu')。
• 2. 异步加载jQuery的时序问题
     你通过动态创建script标签引入jQuery属于异步加载逻辑，代码执行到点击事件绑定的位置时，jQuery很可能还没加载完成，$变量未定义会直接报错。你需要等jQuery加载完成后再执行绑定逻辑。
• 3. 手动覆盖样式导致动画失效
     slideToggle本身就会自动处理元素的显示隐藏及动画过渡，你后续的if else判断直接修改了mainMenu.style.display，相当于直接打断了jQuery的动画执行逻辑，直接把动画效果覆盖了，这部分代码完全可以删掉。
• 补充：slideToggle默认显示元素时会将display设为block，如果你需要菜单显示为flex布局，可以在动画完成的回调中单独设置。

// 加载jQuery
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
script.onload = initMenuEvent;
document.getElementsByTagName('head')[0].appendChild(script);

// 菜单点击事件绑定
function initMenuEvent() {
  mobileMenuButton.addEventListener("click", function() {
    $('#mainMenu').slideToggle(200, function() {
      if($(this).is(':visible')) {
        $(this).css('display', 'flex')
      }
    })
  })
}

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