Javascript 移动菜单没有'；我不能正常工作

我正在努力解决这个问题： 我正试图在我的网站上使用bootstrap和coffeescript制作一个移动菜单。页面是完全响应，它的工作相当好。但当我在移动视图中添加了隐藏和显示菜单的按钮时（通过coffeescript），当我在桌面视图中调整窗口大小时，按钮不会显示

 $('#button-open').on "click", ->
    $('#wrapper').animate({left: '220px'}, 10)
    $(this).css("display", "none")
    $('#button-close').css("display", "block")
    $('.navbar').slideDown(380)

  $('#button-close').on "click", ->
    $(this).css("display", "none")
    $('#button-open').css("display", "block")
    $('.navbar').slideUp(1)
    $('#wrapper').animate({left: '0px'}, 10)


  if $(window).width() <= 768
     $('#wrapper').css('margin', '0px 0px 0px 0px')
  else
     $('#wrapper').css('margin', '0px 0px 0px 220px') and $('#button-close').css('display', 'none')

$（“#按钮打开”）。在“单击”上，->
$（“#包装器”）.animate（{left:'220px'}，10）
$（this.css（“显示”、“无”）
$（“#按钮关闭”）.css（“显示”、“块”）
$（'.navbar'）。向下滑动（380）
$（“#按钮关闭”）。单击->
$（this.css（“显示”、“无”）
$（“#按钮打开”）.css（“显示”、“块”）
$（'.navbar'）.slideUp（1）
$（“#包装器”）.animate（{left:'0px'}，10）
如果$（window）.width（）我从未使用过coffeescript，但使用纯CSS，我会这样做：

#menu {
    position: fixed;   // position menu anywhere on your screen
    z-index: 99;       // lay it on top
    left: 100vw;       // position at the right border of the screen -> invisible
    width: 90vw;       // don't forget to set dimensions
    height: 100vh;
    transition: left 0.5s ease-out;  // don't forget multi-browser-support
}

// when adding class "active" to menu, slide it in
#menu.active {
    left: 0;           // slide it in -> visible
}

现在轮到你使用coffeescript（或任何你使用的东西）了