Question

我正在努力解决这个问题：我正在尝试使用bootstrap和coffeescript在我的网站上制作移动菜单。 Page是完全响应的，并且运行良好。但是当我在移动视图上添加一个按钮来隐藏和显示菜单时（通过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')

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

我试着编写动态改变它的功能，但是我失败了。如果/ else语句有效，但仅在我不调整窗口大小时。

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（或者你使用的任何东西）

移动菜单无法正常工作

1 个答案: