jquery - 在响应模式下 body 不会向左

Question

我有以下示例代码:

JS Fiddle

对于 viewport < 763px:

• 菜单样式更改为垂直模式并隐藏
• 条形图标 (id="bars") 将显示，当它被点击时，菜单向左移动 300px 显示，正文也是如此。

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

我是不是做错了什么？

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')
  });

});