Как решить такую задачу?

Question

[Dmitry Kayumov]

Задача такая, при нажатии на кнопку бургер нужно поменять ширину элементов линий; после того как событие сработало, нужно нажать повторно на кнопку бургер меню и вернуть начальную ширину линий.
Пример:

function burgerMenu () { 
    document.querySelector('.nav-item__burger_line').onclick = () => {
        document.querySelector('.nav-item_line-up').style.width = "20px";
        document.querySelector('.nav-item_line-middle').style.width = "25px";
        document.querySelector('.nav-item_line-down').style.width = "40px";
    }
    document.querySelector('.nav-item__burger_line').onclick = () => {
        document.querySelector('.nav-item_line-up').style.width = "40px";
        document.querySelector('.nav-item_line-middle').style.width = "30px";
        document.querySelector('.nav-item_line-down').style.width = "20px";        
    }   
} burgerMenu();

Comments

[DorF LorS]

добавляешь класс в css к примеру lineUpStyle { width = "20px";} lineMiddleStyle = "25px";}...
и при нажатии
document.querySelector('.nav-item__burger_line').addEventListener("click", () => {
document.querySelector('.nav-item_line-up').toggle("lineUpStyle");
...
})

[MrColdCoffee]

Как-то так
CSS

.nav-item_line-up,.clicked .nav-item_line-down{width:40px;}
.nav-item_line-middle{width:30px;}
.clicked .nav-item_line-middle{width:25px;}
.nav-item_line-down,.clicked .nav-item_line-up{width:20px;}

JS

document.querySelector('.nav-item__burger_line').onclick = () => {
document.querySelector('.nav-item__burger_line').classList.toggle('clicked');
}

[DorF LorS]

https://codepen.io/DorF_0/pen/QWOzozr вот пример для вас

[Dmitry Kayumov]

Всем спасибо, каждый способ работает отлично!