From b83b549855d09859b4e9db3063a12c781f274765 Mon Sep 17 00:00:00 2001 From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn> Date: Tue, 1 Oct 2024 20:30:35 +0000 Subject: [PATCH] Update file menu.html --- wiki/menu.html | 81 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 53 insertions(+), 28 deletions(-) diff --git a/wiki/menu.html b/wiki/menu.html index 20e3bec5..f060ed67 100644 --- a/wiki/menu.html +++ b/wiki/menu.html @@ -208,31 +208,6 @@ </nav> <script> - function over(el){ - el.children[0].classList.add('active'); - if (el.children.length > 1){ - let son = el.children[1]; - if (getComputedStyle(son,null)["display"]=="none"){ - son.style.display = "block"; - setTimeout(function(){ - son.style.opacity = 1; - }, 10); - } - } - } - function leave(el){ - el.children[0].classList.remove('active'); - if (el.children.length > 1){ - let son = el.children[1]; - if (getComputedStyle(son,null)["display"]=="block"){ - son.style.opacity = 0; - setTimeout(function(){ - son.style.display = "none"; - }, 300); - } - } - } - // 修改èœå•åˆ‡æ¢åŠŸèƒ½ function toggleMenu(){ var navbar = document.getElementById('my-navbar'); navbar.classList.toggle('show-menu'); @@ -243,12 +218,27 @@ navItems.forEach(function(item){ item.addEventListener('click', function(e){ if(window.innerWidth <= 768){ - - e.preventDefault(); - this.classList.toggle('show'); + if(this.querySelector('.son')){ + e.preventDefault(); + this.classList.toggle('show'); + } } }); }); + + document.addEventListener('click', function(e){ + if(window.innerWidth <= 768){ + var navbar = document.getElementById('my-navbar'); + var hamburger = document.querySelector('.hamburger'); + if(!navbar.contains(e.target) && e.target !== hamburger){ + navbar.classList.remove('show-menu'); + navItems.forEach(function(item){ + item.classList.remove('show'); + }); + } + } + }); + window.addEventListener('resize', function() { var navbar = document.getElementById('my-navbar'); if(window.innerWidth > 768){ @@ -258,6 +248,41 @@ }); } }); + + function over(el){ + if(window.innerWidth > 768){ + el.children[0].classList.add('active'); + if (el.children.length > 1){ + let son = el.children[1]; + son.style.display = "block"; + setTimeout(function(){ + son.style.opacity = 1; + }, 10); + } + } + } + + function leave(el){ + if(window.innerWidth > 768){ + el.children[0].classList.remove('active'); + if (el.children.length > 1){ + let son = el.children[1]; + son.style.opacity = 0; + setTimeout(function(){ + son.style.display = "none"; + }, 300); + } + } + } + + navItems.forEach(function(item){ + item.addEventListener('mouseover', function(){ + over(this); + }); + item.addEventListener('mouseleave', function(){ + leave(this); + }); + }); </script> </body> </html> \ No newline at end of file -- GitLab