Я новичок в создании веб-страниц и только начал создавать их с помощью Bootstrap 5. Я хочу добавить/удалить класс начальной загрузки «bg-opacity» в свою панель навигации в зависимости от ширины области просмотра и думаю, что смогу сделать это с помощью JS. Но найденная мной функция не работает, потому что BS больше не использует JQuery. Есть ли простой способ добавить/удалить классы, существующие в Bootstrap 5?
Буду очень рад ответу.
Приветствую и заранее спасибо :)
Я пытался использовать эту функцию
jQuery(document).ready(function($) {
var alterClass = function() {
var ww = document.body.clientWidth;
if (ww < 767) {
$('.navbar').addClass('bg-opacity-75');
} else if (ww >= 768) {
$('.navbar').removeClass('bg-opacity-75');
};
};
$(window).resize(function(){
alterClass();
});
//Fire it when the page first loads:
alterClass();
});
🤔 А знаете ли вы, что...
JavaScript поддерживает работу с различными форматами данных, такими как JSON и XML.
Вы можете написать медиа-запросы в JS с помощью window.matchMedia() и переключать класс в зависимости от того, соответствует ли запрос или нет.
Здесь мы проверяем наличие min-width: 768px. Если размер вашего экрана меньше 768 пикселей, mediaQuery.matches будет false. Если ваш экран 768 пикселей или выше, то mediaQuery.matches будет true.
На основе этого логического значения он добавит или удалит класс с помощью метода classList.toggle().
const navBar = document.querySelector('.navbar');
const mediaQuery = matchMedia('(min-width: 768px)');
function alterClass(match) {
navBar.classList.toggle('bg-opacity-75', !match);
}
alterClass(mediaQuery.matches);
mediaQuery.addEventListener('change', (event) => {
alterClass(event.matches);
});