Изменить класс css с помощью js

Question

Я хочу добавить и удалить класс css, когда ширина окна меньше 768 пикселей. Я использовал JavaScript, чтобы сделать это:

$(window).ready(function() { 
var $width = $(window).width(); 
    if ($width <= 768){ 
    $('header').addClass('hide'); 
    $('#menu-switch').removeClass('hide'); 
}; 
}); 

Проблема заключается в том, что я обновить эту страницу, так что он работает. Есть ли способ добавить и удалить класс без обновления страницы?

Answer 1

Путь 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 с помощью так называемых запросов СМИ. Ваше решение для USECASE вы показали, будет выглядеть следующим образом:

@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; 
    } 
} 

Answer 2

JavaScript:

window.onresize = function(event) { 
var $width = $(window).width(); 
    if ($width <= 768){ 
    $('header').addClass('hide'); 
    $('#menu-switch').removeClass('hide'); 
}; 
}; 

Answer 3

Это можно сделать с помощью CSS для более гладкого рендеринга в окне изменения размера слушателя является довольно тяжелым для пользователей с низкими компьютерами Perfomance.

Try somethink так:

@media screen and (max-width: 767px) { 
header, #menu-switch { 
    display: none; 
} 
} 

Answer 4

jQuery(window).on('resize', function(){ .... 

Мы должны были использовать ту же идею, чтобы исправить CSS на изменение размера ранее. Мы также добавили некоторую задержку и инициировали событие изменения размера самостоятельно, а также готовый документ, чтобы быть уверенным.

setTimeout(function(){ 
    jQuery(window).trigger('resize'); 
}, 200); 

Answer 5

попробовать:

$(window).bind('load resize', function(){ 
 
var $width = $(window).width(); 
 
    if ($width <= 768){ 
 
    $('header').addClass('hide'); 
 
    $('#menu-switch').removeClass('hide'); 
 
}; 
 
});

Answer 6

Вы должны использовать:

jQuery(window).resize(function(){ 
    var $width = $(window).width(); 
    if ($width <= 768){ 
     $('header').addClass('hide'); 
     $('#menu-switch').removeClass('hide'); 
    }; 
}); 

Таким образом, он может поймать событие браузера изменения размеров и каждый раз, когда пользователь изменяет его браузер, ширина переменной получит новое значение.

Answer 7

Вы должны проверить, когда страница загрузки и когда размер или пролистайте:

var changeMe = function(){ 
    var $width = $(document).width(); 
    if ($width <= 768){ 
     $('header').addClass('hide'); 
     $('#menu-switch').removeClass('hide'); 
    }; 
}; 
/* On ready */ 
$(document).ready(function(){changeMe();}); 
/* On resize */ 
$(window).resize(function(){changeMe();}); 
/* On scroll */ 
$(document).scroll(function(){changeMe();}); 

Эта работа 100%.

Но вы можете использовать CSS3 для этой проблемы:

@media screen and (max-width: 768px) { 
    header { 
     display: none; 
    } 
    #menu-switch { 
     display: block; 
    } 
} 

Просто включите CSS switcers ПОСЛЕ основного стиля и изменить только то, что вам нужно.