0

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

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

5
  • 1
    Владимир, переведите пожалуйста вопрос) Commented 2 мар. 2021 в 9:59
  • Надо перевести то что у меня есть на JQuery на чистый JS. Некоторые куски я попытался переделать. Но не уверен что это правильно. Commented 2 мар. 2021 в 10:04
  • 1
    Владимир, это стак на русском) Вы отредактируйте свой вопрос, чтобы заголовок и тело запроса было на русском Commented 2 мар. 2021 в 10:06
  • Все отредактировал) Commented 2 мар. 2021 в 10:16
  • 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)
    – InDevX
    Commented 2 мар. 2021 в 10:48

1 ответ 1

0
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);
});
3
  • Оно не добавляет класс burger-menu_active, ломаеться на условии if Commented 2 мар. 2021 в 11:32
  • debager показал что оно заходит в функцию добавляет класс а потом слушает событие button (только почему то не по клику) и тут же возврат в function toggleMenu() и удаляет класс active Commented 2 мар. 2021 в 11:49
  • @VladimirPacessor Добавьте, пожалуйста, html часть, чтобы лучше понимать, что оно должно делать
    – Bamberg
    Commented 2 мар. 2021 в 12:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.