移动菜单无法正常工作

Question

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

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

不要介意动画，效果很好。问题是：当 window 将其大小更改为超过 768px 时按钮仍然可见，并且包装器以两种方式表现，这取决于我如何更改代码：它在左侧添加另一个 220px 边距或在我调整大小时保持边距 0px window. 我的目标是： - 按钮仅在宽度 < 768px 的 window 上可见 - 当宽度 < 768 时包装器始终剩余 0 像素，当宽度 > 768 像素时包装器始终剩余 220 像素。

我尝试编写动态更改它的函数，但我失败了。 If/else 语句有效，但仅在我不调整 window 大小时有效。

Answer 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
}

现在轮到你让它与 coffeescript（或任何你使用的）一起工作了

移动菜单无法正常工作

Mobile menu doesn't work properly

html

javascript

css

jquery

coffeescript