Мой код JavaScript для отображения мобильного меню работает на Android, но не на IOS. ⇐ CSS
-
Anonymous
Мой код JavaScript для отображения мобильного меню работает на Android, но не на IOS.
So i have a project in Angular that has a mobile menu, there is one module that has the header and the mobile menu. This code is executed in the Typescript of the module of the header-mobile (module).
I tried to execute the code in the global module of Angular, in Typescript and in to the end of the HTML, but it doesn't work (in IOS). I also verified the css.
This is the link https://portfolio-7f490.web.app/
document.addEventListener('DOMContentLoaded', () => { const headerBtn = document.querySelector('.header__bars') as HTMLElement; const mobileNav = document.querySelector('.mobile-nav') as HTMLElement; const mobileLinks = document.querySelectorAll('.mobile-nav__link'); let isMobileNavOpen = false; headerBtn?.addEventListener('click', () => { isMobileNavOpen =! isMobileNavOpen; if(isMobileNavOpen === true){ mobileNav.style.display = 'flex'; document.body.style.overflowY = 'hidden'; }else{ mobileNav.style.display = 'none'; document.body.style.overflowY = 'auto'; } mobileLinks.forEach(link => { link.addEventListener('click', () => { isMobileNavOpen = false; mobileNav.style.display = 'none'; document.body.style.overflowY = 'auto'; }) }); }); const themeToggleBtns = document.querySelectorAll('#theme-toggle'); // estado const theme = localStorage.getItem('theme'); // carga theme && document.body.classList.add(theme); // handler const handleThemeToggle = () => { document.body.classList.toggle('light-mode'); if(document.body.classList.contains('light-mode')){ localStorage.setItem('theme', 'light-mode'); }else{ localStorage.removeItem('theme'); } } //evento themeToggleBtns.forEach(btn => { btn.addEventListener('click', handleThemeToggle) }); });
Источник: https://stackoverflow.com/questions/772 ... not-on-ios
So i have a project in Angular that has a mobile menu, there is one module that has the header and the mobile menu. This code is executed in the Typescript of the module of the header-mobile (module).
I tried to execute the code in the global module of Angular, in Typescript and in to the end of the HTML, but it doesn't work (in IOS). I also verified the css.
This is the link https://portfolio-7f490.web.app/
document.addEventListener('DOMContentLoaded', () => { const headerBtn = document.querySelector('.header__bars') as HTMLElement; const mobileNav = document.querySelector('.mobile-nav') as HTMLElement; const mobileLinks = document.querySelectorAll('.mobile-nav__link'); let isMobileNavOpen = false; headerBtn?.addEventListener('click', () => { isMobileNavOpen =! isMobileNavOpen; if(isMobileNavOpen === true){ mobileNav.style.display = 'flex'; document.body.style.overflowY = 'hidden'; }else{ mobileNav.style.display = 'none'; document.body.style.overflowY = 'auto'; } mobileLinks.forEach(link => { link.addEventListener('click', () => { isMobileNavOpen = false; mobileNav.style.display = 'none'; document.body.style.overflowY = 'auto'; }) }); }); const themeToggleBtns = document.querySelectorAll('#theme-toggle'); // estado const theme = localStorage.getItem('theme'); // carga theme && document.body.classList.add(theme); // handler const handleThemeToggle = () => { document.body.classList.toggle('light-mode'); if(document.body.classList.contains('light-mode')){ localStorage.setItem('theme', 'light-mode'); }else{ localStorage.removeItem('theme'); } } //evento themeToggleBtns.forEach(btn => { btn.addEventListener('click', handleThemeToggle) }); });
Источник: https://stackoverflow.com/questions/772 ... not-on-ios
Мобильная версия