body 在响应模式下不会向左

Question

我有以下示例代码：

JS Fiddle

对于viewport < 763px:

菜单样式更改为垂直模式并隐藏
条形图标（id="bars"）会出现，点击后，菜单会向左移动300px显示，所以body.

问题是当点击栏图标时，没有点击关闭图标（id="close-icon"），然后调整视口大于763px，只有菜单正确切换为水平模式，而body 没有向左移动。

我是不是做错了什么？

Answer 1

因为您正在使用 jquery 设置 left 属性，所以您无法使用 CSS 完全覆盖它。我建议做类似的事情：

JS Fiddle

// Run on page load or window resize
$(window).on('load resize', function() {
    var windowWidth = $(this).width();

    // If less than 763 (what you tried with media query)
    if (windowWidth > 763) {
      $('body').css('left', '0');
    }

    // If over/equal 763 and left menu open
    if (windowWidth <= 763 && $('#menu').css('left') == "0px") {
      $('body').css('left', '300px');
    }
});

另一种选择是使用 CSS 类来处理它：

JS Fiddle

CSS

.open, .close {
  transition: .2s;
}
body.open {
  left: 300px;
}
#menu.open {
  left: 0px;
}    
#menu.close {
  left: -300px;
}
@media screen and (min-width: 763px) {            
  .open, .close {
     transition: 0;
  }
  #menu.close, body.open, body.close {
    left: 0;
  }
}

切换类与 jquery:

$(function() {
  $("#bars").click(function() {
    $('#menu, body').removeClass('close').addClass('open');
  });

  $("#close-icon").click(function() {
    $('#menu, body').removeClass('open').addClass('close')
  });

});

body 在响应模式下不会向左

body not goes to left in responsive mode

css

jquery

responsive