переделать JQuery на чистый JS

Question

У меня есть вот такой код на 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());

Мне надо переделать это все, а как я не знаю)

Answer 1

function burgerMenu(selector) {
    let menu = document.querySelector(selector);
    let button = menu.querySelector('.burger-menu_button');
    let lines = menu.querySelector('.burger-menu_lines');
    let links = menu.querySelector('.burger-menu_link');
    let overlay = menu.querySelector('.burger-menu_overlay');
    let body = document.querySelector('body');

    button.addEventListener('click', e => {
        e.preventDefault();
        toggleMenu();
    });

    lines.addEventListener('click', e => {
        e.preventDefault();
        toggleMenu();
    });

    links.addEventListener('click', () => toggleMenu);
    overlay.addEventListener('click', () => toggleMenu);

    function toggleMenu(){
        if (menu.classList.contains('burger-menu_active')) {
            menu.classList.remove('burger-menu_active');
            body.style.overflow = 'visible';
        } else {
            menu.classList.add('burger-menu_active');
            body.style.overflow = 'hidden';
        }
    }
}

burgerMenu('.burger-menu');

Но тут я бы добавил класс каждому элементу, при клике на который должно вызываться toggleMenu(). Примерно так:

let toggledMenu = document.querySelectorAll('.burger-menu__toggle-menu');

toggledMenu.forEach(element => {
   element.addEventListener('click', () => toggleMenu);
});

БЛОГ НА HUSL

переделать JQuery на чистый JS

Ответы (1 шт):