Возможно ли упростить такой код?

Question

[Роман Татаринов]

Есть код. Вопрос можно ли его как-то упростить? Например, дать массив присваеваемых классов и массив переменных. И потом сопоставлять. Дабы используется везде один метод toggleClass(). Первой переменной присвоить первый класс. То есть как написать это место, чтобы было более менее грамотно, а не лапша?

function activeMenu() {
		toggle.toggleClass('animate');
		firstLine.toggleClass('animateFirstLine');	
		secondLine.toggleClass('animateSecondLine');	
		lastLine.toggleClass('animateLastLine');
		menu.toggleClass('menu-opened');
		overlay.toggleClass('overlay--active');
		body.toggleClass('fixed-content');
		setTimeout(function() { $('.close-list').removeClass('close-list') }, 400);
	};

Answer 1

[enchikiben]

можно еще посмотреть на структура html и что то вынести на уровень css, например когда в firstLine добавляется класс то под уровни (если они вложены) secondLine lastLine могут быть обработаны с помощью css и т.д.

Comments

[Роман Татаринов]

Это вряд ли. Структура вот codepen.io/romkaa/pen/ORLRqQ

Answer 2

[iBird Rose]

объеденить все элементы в массив. и обозвать все классы одним классом. и сделать один туггл этого класса для масива
типа:

linearray = [firstLine,  secondLine, lastLine]
$(linearray).toggleClass('active');

Comments

[DevMan]

iBird Rose тогл, а не тугл)

[Роман Татаринов]

iBird Rose спасибо. Затащил три линии в один массив обращаюсь к двум классам сразу, работает. Еще есть предложения по сокращению кода?

Answer 3

[trushka]

Просто все те стили что вы прописываете для классов, которые переключаете, прописывайте для
body.fixed-content (нужный элемент). Тогда всё сведётся к

function activeMenu() {
    body.toggleClass('fixed-content');
    setTimeout(function() { $('.close-list').removeClass('close-list') }, 400);
};