У меня есть вот такой код на JQuery. Он отвечает за открытия мобильного меню. Но надо его переделать на JS.
function burgerMenu(selector) {
let menu = $(selector);
let button = menu.find('.burger-menu_button', '.burger-menu_lines');
let links = menu.find('.burger-menu_link');
let overlay = menu.find('.burger-menu_overlay');
button.on('click', (e) => {
e.preventDefault();
toggleMenu();
});
links.on('click', () => toggleMenu());
overlay.on('click', () => toggleMenu());
function toggleMenu(){
menu.toggleClass('burger-menu_active');
if (menu.hasClass('burger-menu_active')) {
$('body').css('overlow', 'hidden');
} else {
$('body').css('overlow', 'visible');
}
}
}
burgerMenu('.burger-menu');
Первую часть кода я переделал примерно вот так, но я не уверен что это правильно.
function burgerMenu(selector) {
let menu = document.querySelector(selector);
let button = menu.querySelectorAll('.burger-menu_button');
let links = menu.querySelectorAll('.burger-menu_link');
let overlay = menu.querySelectorAll('.burger-menu_overlay');
И вот этот кусочек тоже немного переделал но не до конца.
function toggleMenu(){
menu.toggleClass('burger-menu_active');
if (menu.hasClass('burger-menu_active')) {
document.querySelector('body').parentElement.style('overlow', 'hidden');
} else {
document.querySelector('body').parentElement.style('overlow', 'visible');
}
}
Это часть кода совсем не понимаю как переделать на JS.
button.addEventListener('onclick', (e) => {
e.preventDefault();
toggleMenu();
});
links.addEventListener('onclick', () => toggleMenu());
overlay.addEventListener('onclick', () => toggleMenu());
Мне надо переделать это все, а как я не знаю)
menu.toggleClass('burger-menu_active');
=>menu.classList.toggle('burger-menu_active');
;menu.hasClass('burger-menu_active')
=>menu.classList.contains('burger-menu_active')
; а насчет последнего - там buttons, links и overlay это не один эл-т, то есть, вам надо просто их перебирать (хоть тем же forEach) и на каждый добавлять listener (и не меняйте click на onclick)