Как добавить и убрать класс по клику на разные элементы?

Question

[constant_in]

Как при клике на .children, добавить свойство transform: translateX(-100%); .menu и убрать его при клике на .back-menu?

<ul class="menu">
    <li class="menu-item children">
        <a href="">Текст</a>
        <ul class="sub-menu">
            <li class="back-menu">Назад</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="">Текст</a>
    </li>
    <li class="menu-item children">
        <a href="">Текст</a>
        <ul class="sub-menu">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>

Answer 1

[Алексей Дубровин]

Гайд по поисковику
Запросы в поисковик:
1) Как получить элемент по классу
2) Как навесить событие на клик.
3) Как добавить класс к элементу
4) Как добавить стили к элементу

Вы удивитесь

Comments

[constant_in]

$(document).ready(function() {
  $('.children').click(function() {
    $('.menu').addClass('active');
  });
  $('.back-menu').click(function() {
    $('.menu').removeClass('active');
  });
});

Не понимаю почему не работает? Все вроде бы так сделал

[Алексей Дубровин]

constant_in,
К сожалению я не знаю jq,
Делаю предположение что не правильно навешивается событие. Обычно не так пишут.
.on(событие, функция)

[Ankhena]

Алексей Дубровин, вам нужно прочитать про всплытие событий. Ведь .back-menu лежит в .children и клик срабатывает 2 раза, возвращая активное состояние.
Либо вытащить один из другого.