Как скрыть бургер при нажатии?

Question

[melodze]

Есть бургер меню


При нажатии на ссылку (она якорная), нужно что бы бургер меню исчезало. А то получиться следующие:


Я написал вот такой код, но полагаю он не верный)

const menuLink = document.querySelectorAll(".menu-link");
const menu = document.querySelector(".menu");

menuLink.addEventListener("click", () => {
  menu.style.display = 'none'
})

Comments

[mavirys]

Ваш подход почти верный, но у вас есть несколько ошибок.

1. `querySelectorAll` возвращает коллекцию элементов, а не отдельный элемент. Поэтому вам нужно перебрать все элементы коллекции с помощью цикла или использовать другой способ выбора одного элемента, если вы знаете, что в коллекции всегда будет только один элемент.

2. Вместо `display: 'none'` вам следует использовать `display: none`, без кавычек.

Вот исправленный код:

```javascript
const menuLinks = document.querySelectorAll(".menu-link");
const menu = document.querySelector(".menu");

for (let i = 0; i < menuLinks.length; i++) {
menuLinks[i].addEventListener("click", () => {
menu.style.display = 'none';
});
}
```

Этот код добавляет обработчик события на каждую ссылку меню и скрывает меню, устанавливая `display: none`, при клике на любую из ссылок.

Обратите внимание, что данный код предполагает, что у вас есть элементы с классом "menu-link", которые являются ссылками в меню, и элемент с классом "menu", который представляет само меню. Убедитесь, что ваши классы соответствуют структуре вашего HTML-кода.

Answer 1

[senator]

querySelectorAll возвращает массив нужно его перебирать

Comments

[melodze]

Можешь пожалуйста написать более подробный код ?

[senator]

const menuLink = document.querySelectorAll(".menu-link");
const menu = document.querySelector(".menu");

for (let el of menuLink) {
  el.addEventListener("click", () => {
    menu.style.display = 'none'
  });
}

[melodze]

senator, Благодарю :)

[melodze]

senator, Ещё вопрос если можно
Как крестик можно крестик назад в бургер превратить при нажатии на ссылку ?

[senator]

melodze, нужно на обработчик события добавить изменение стилей крестика. Transform translate и т.д