Как скрыть бургер при нажатии?
Есть бургер меню
При нажатии на ссылку (она якорная), нужно что бы бургер меню исчезало. А то получиться следующие:
Я написал вот такой код, но полагаю он не верный)
const menuLink = document.querySelectorAll(".menu-link"); const menu = document.querySelector(".menu"); menuLink.addEventListener("click", () => { menu.style.display = 'none' }) |
const menuLink = document.querySelectorAll(".menu-link"); const menu = document.querySelector(".menu"); menuLink.addEventListener("click", () => { menu.style.display = 'none' })
Дополнительно:
Ваш подход почти верный, но у вас есть несколько ошибок.
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-кода.
querySelectorAll возвращает массив нужно его перебирать
- Можешь пожалуйста написать более подробный код ?
-
const menuLink = document.querySelectorAll(".menu-link"); const menu = document.querySelector(".menu"); for (let el of menuLink) { el.addEventListener("click", () => { menu.style.display = 'none' }); }
const menuLink = document.querySelectorAll(".menu-link"); const menu = document.querySelector(".menu"); for (let el of menuLink) { el.addEventListener("click", () => { menu.style.display = 'none' }); }
- senator, Благодарю :)
- senator, Ещё вопрос если можно
Как крестик можно крестик назад в бургер превратить при нажатии на ссылку ? - melodze, нужно на обработчик события добавить изменение стилей крестика. Transform translate и т.д
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для скрытия бургера в мобильном меню при нажатии на него, можно использовать JavaScript. Вам необходимо добавить обработчик события клика на бургер и при этом изменить его стиль на "display: none".
Пример кода на JavaScript:
document.addEventListener('DOMContentLoaded', function() { const burger = document.querySelector('.burger'); const mobileMenu = document.querySelector('.mobile-menu'); burger.addEventListener('click', function() { mobileMenu.style.display = 'none'; }); });
В данном примере мы добавляем обработчик события "click" на элемент с классом "burger", который представляет собой иконку бургера в мобильном меню. При клике на этот элемент, мы получаем доступ к элементу с классом "mobile-menu", который содержит само мобильное меню, и изменяем его стиль на "display: none", что скрывает его из виду.
Убедитесь, что классы элементов в вашем HTML коде совпадают с классами, указанными в JavaScript коде. Также учтите, что этот код приведен в качестве примера и может потребовать доработки в зависимости от структуры вашего сайта.
Надеюсь, это поможет вам скрыть бургер при нажатии на него! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.