移动菜单无法正常工作答案

【问题标题】：Mobile menu doesn't work properly移动菜单无法正常工作
【发布时间】：2018-05-02 05:58:13
【问题描述】：

我正在努力解决这个问题：我正在尝试使用引导程序和咖啡脚本在我的网站上制作移动菜单。页面完全响应并且运行良好。但是当我添加一个按钮来隐藏和显示移动视图上的菜单（通过咖啡脚本）时，当我在桌面视图上调整窗口大小时，按钮不会消失。

 $('#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')

不要介意动画，它工作得很好。问题是：当窗口改变其大小超过 768px 时按钮仍然可见并且包装器以两种方式运行，这取决于我如何更改代码：它在左侧添加另一个 220px 边距或在我调整窗口大小时保持在边距 0px。我的目标是： - 按钮仅在宽度 768 像素时，包装器总是有 220 像素。

我试图编写动态改变它的函数，但我失败了。 if/else 语句有效，但仅当我不调整窗口大小时。

【问题讨论】：

标签： javascript jquery html css coffeescript

【解决方案1】：

我从来没有用过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
}

现在轮到你让它与咖啡脚本（或任何你使用的东西）一起工作了

【讨论】：