Как переключаться между классами в JS

Question

Я новичок в JS, и я пытаюсь решить некоторые проблемы с меню. Если я нажму на div "работа", откроется меню "работа". Если я нажму снова, закрывается. То же самое с "о".

Код такой:

$(function () {
    $('#work').on('click', function (){
        $('.view').toggleClass('openwork');
    })
});


$(function () {
    $('#about').on('click', function (){
        $('.about').toggleClass('openabout');
    })
});

все хорошо, но теперь я хочу переключать открытые меню (классы). Если у меня открыта "работа", я хочу закрыть ее, когда открою "о".

Я пытался использовать те же функции с инвертированными классами, но это не работает!

Итак, как я могу заставить это работать?

Answer 1

Я считаю, что вы ищете что-то вроде этого:

$(function () {
    $('#work').on('click', function (){
        $('.view').toggleClass('openwork');
        $('.about').removeClass('openabout');
    })
});


$(function () {
    $('#about').on('click', function (){
        $('.about').toggleClass('openabout');
        $('.view').removeClass('openwork');
    })
});

Когда вы щелкаете одно из меню, оно переключает свое состояние (поэтому открывается, если закрыто, и закрывается, если открыто), а другое закрывается или остается закрытым.