Как сделать на чистом JS из кода JQ toggleClass?

@sent83 · Регистрация: 02.12.2019

Студворк — интернет-сервис помощи студентам

Всем привет!
Пробовал разными способами, но именно для body class lock не пойму как сделать.
Суть в том чтобы при открытии мобильного меню на класс lock добавить в css overflow: hidden;
Если у кого есть наработки скиньте пожалуйста!
Всем удачного дня!

JavaScript
1
2
3
4
5
6
$(document).ready(function () {
    $('.header__burger').click(function (event) {
        $('.header__burger').toggleClass('active');
        $('body').toggleClass('lock');
    });
});

@Iverycool · 19.05.2020, 05:56

sent83,

JavaScript
1
const toggleClass = (elem, className) => elem.classList[(elem.classList.contains(className)) ? 'remove' : 'add'](className)

Добавлено через 27 секунд
Немножко длинная строка, зато коротко

@sent83 · 20.05.2020, 02:02 **[ТС]**

Iverycool, Извиняюсь за вопрос а как его применять?
где className нужно в в строке имя класса? '.burger'

@Iverycool · 20.05.2020, 04:19

sent83, Я совсем вас не понимаю. Использовать toggleClass так:

JavaScript
1
2
3
4
5
6
$(document).ready(function () {
    $('.header__burger').click(function (event) {
        toggleClass($('.header__burger'), 'active');
        toggleClass($('body'), 'lock');
    });
});

Добавлено через 58 секунд
Или вам надо избавится от jQuery?

@sent83 · 20.05.2020, 18:42 **[ТС]**

Iverycool, Да избавится от JQ! Ваш код короткий, я не понятно куда вставлять класс? Показал знакомому говорит что это вообще не JS

@Iverycool · 21.05.2020, 01:50

sent83, вот перевод:

JavaScript
1
2
3
4
5
6
document.onload = function () {
    document.querySelector('.header__burger').onclick = function (event) {
        toggleClass(document.querySelector('.header__burger'), 'active');
        toggleClass(document.querySelector('body'), 'lock');
    }
};

@sent83 · 21.05.2020, 04:25 **[ТС]**

Iverycool, Спасибо большое за перевод! Почему то не работает! это warnings VSCODE 'toggleClass' is not defined. (W117) 'toggleClass' is not defined. (W117)
В консоле браузера ошибок нету, класс .header__burger правильный! В чем может быть дело?

@Iverycool · 21.05.2020, 04:32

sent83, Ну я думал, что догадаетесь, что надо было взять из предыдущего ответа.
Держите, что называется "с ложечки":

JavaScript
1
2
3
4
5
6
7
const toggleClass = (elem, className) => elem.classList[(elem.classList.contains(className)) ? 'remove' : 'add'](className)
document.onload = function () {
    document.querySelector('.header__burger').onclick = function (event) {
        toggleClass(document.querySelector('.header__burger'), 'active');
        toggleClass(document.querySelector('body'), 'lock');
    }
};

@j2FunOnly · 23.05.2020, 14:10

Element.classList.toggle()

@Iverycool · 23.05.2020, 21:28

Не по теме:

j2FunOnly, да чё-то забыл

@sent83 · 24.05.2020, 05:42 **[ТС]**

j2FunOnly, Iverycool, А куда вставлять?
Element.classList.toggle()

JavaScript
1
2
3
4
5
6
7
const toggleClass = (elem, className) => elem.classList[(elem.classList.contains(className)) ? 'remove' : 'add'](className)
document.onload = function () {
    document.querySelector('.header__burger').onclick = function (event) {
        toggleClass(document.querySelector('.header__burger'), 'active');
        toggleClass(document.querySelector('body'), 'lock');
    }
};

Почему то не работает?

@Iverycool · 24.05.2020, 06:05

sent83,

JavaScript
1
2
3
4
5
6
document.onload = function () {
    document.querySelector('.header__burger').onclick = function (event) {
        document.querySelector('.header__burger').classList.toggle('active');
        document.querySelector('body').classList.toggle('lock');
    }
};

@sent83 · 24.05.2020, 22:14 **[ТС]**

Iverycool,
А эту строку вначале надо или нет?

JavaScript
1
const toggleClass = (elem, className) => elem.classList[(elem.classList.contains(className)) ? 'remove' : 'add'](className)

@Iverycool · 25.05.2020, 06:33

sent83, нет

@sent83 · 25.05.2020, 14:59 **[ТС]**

Iverycool, Не работает, даже евент не накидывает! Интересно почему? Класс верный указан .header__burger!

JavaScript
1
2
3
4
5
6
document.onload = function () {
    document.querySelector('.header__burger').onclick = function (event) {
        document.querySelector('.header__burger').classList.toggle('active');
        document.querySelector('body').classList.toggle('lock');
    }
};

@Iverycool · 25.05.2020, 17:08

sent83, ошибка, должно быть так:

JavaScript
1
2
3
4
5
6
document.addEventListener("DOMContentLoaded", function () {
    document.querySelector('.header__burger').onclick = function (event) {
        document.querySelector('.header__burger').classList.toggle('active');
        document.querySelector('body').classList.toggle('lock');
    }
});

@sent83 · 28.05.2020, 09:50 **[ТС]**

Iverycool,
Спасибо! Хорошего дня!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Как сделать на чистом JS из кода JQ toggleClass?

Решение

Решение

@sent83 3 / 3 / 0 Регистрация: 02.12.2019 Сообщений: 57
	20.05.2020, 02:02 [ТС]
	Iverycool, Извиняюсь за вопрос а как его применять? где className нужно в в строке имя класса? '.burger' 0

@sent83 3 / 3 / 0 Регистрация: 02.12.2019 Сообщений: 57
	20.05.2020, 18:42 [ТС]
	Iverycool, Да избавится от JQ! Ваш код короткий, я не понятно куда вставлять класс? Показал знакомому говорит что это вообще не JS 0

@sent83 3 / 3 / 0 Регистрация: 02.12.2019 Сообщений: 57
	21.05.2020, 04:25 [ТС]
	Iverycool, Спасибо большое за перевод! Почему то не работает! это warnings VSCODE 'toggleClass' is not defined. (W117) 'toggleClass' is not defined. (W117) В консоле браузера ошибок нету, класс .header__burger правильный! В чем может быть дело? 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	23.05.2020, 14:10
	Element.classList.toggle() 1

@Iverycool
	23.05.2020, 21:28
	Не по теме: j2FunOnly, да чё-то забыл 0

@Iverycool 1586 / 796 / 362 Регистрация: 01.02.2019 Сообщений: 1,047
	25.05.2020, 06:33
	sent83, нет 1

@sent83 3 / 3 / 0 Регистрация: 02.12.2019 Сообщений: 57
	28.05.2020, 09:50 [ТС]
	Iverycool, Спасибо! Хорошего дня! 0