当窗口的宽度小于768 is时，我想添加和删除css类。我使用javascript来完成这个任务：
$(window).ready(function() {
var $width = $(window).width();
if ($width <= 768){
$('header').addClass('hide');
$('#menu-switch').removeClass('hide');
};
});问题是我必须刷新页面，这样它才能正常工作。有没有一种无需刷新页面就可以添加和删除类的方法？
回答 7
Stack Overflow用户
回答已采纳
发布于 2015-05-26 07:33:50
jQuery的方式应该是
$(window).on('resize', function() {
if ($(window).width() <= 768){
$('header').addClass('hide');
$('#menu-switch').removeClass('hide');
}
else {
$('#menu-switch').addClass('hide');
$('header').removeClass('hide');
}
});但是您不应该使用这一点，因为在CSS中有一种通过所谓的媒体查询来执行的更好的方式。您展示的实用程序的解决方案如下所示：
@media screen and (max-width: 768px) {
header {
display: none;
}
#menu-switch {
display: block;
}
}
@media screen and (min-width: 769px) {
header {
display: block;
}
#menu-switch {
display: none;
}
}Stack Overflow用户
发布于 2015-05-26 07:27:38
JavaScript：
window.onresize = function(event) {
var $width = $(window).width();
if ($width <= 768){
$('header').addClass('hide');
$('#menu-switch').removeClass('hide');
};
};Stack Overflow用户
发布于 2015-05-26 07:29:49
这可以用css来实现，因为窗口大小调整监听器对于低性能计算机的用户来说是相当沉重的。
试着像这样想：
@media screen and (max-width: 767px) {
header, #menu-switch {
display: none;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30462736
复制
腾讯云开发者
