From d9d9006ffe28666e8386f64fbfe406b06b33568c Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 30 Oct 2021 03:06:11 +0800 Subject: [PATCH 1/2] Auto close menu on mouseLeave and outside click --- _includes/views/header.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/_includes/views/header.html b/_includes/views/header.html index c43d7ec1b47..64cc927c9cb 100644 --- a/_includes/views/header.html +++ b/_includes/views/header.html @@ -92,4 +92,31 @@ storeScrollData(); } document.addEventListener('DOMContentLoaded', initHeader); + + function initTrigger () { + function uncheckNavTrigger() { + document.querySelector("#nav-trigger").checked = false; + } + document.addEventListener('click', uncheckNavTrigger); + + var timer; + document.querySelector(".trigger").addEventListener('mouseLeave', () => { + timer = setTimeout(uncheckNavTrigger, 1000); + }); + + document.querySelector(".trigger").addEventListener('mouseEnter', () => { + if (timer) { + clearTimeout(timer); + } + }); + + document.querySelector(".trigger").addEventListener('click', (event) => { + event.stopPropagation(); + }); + + document.querySelector(".site-nav").addEventListener('click', (event) => { + event.stopPropagation(); + }); + } + document.addEventListener('DOMContentLoaded', initTrigger); From cdc6c62ddb50392c3e1db50e8e51d2e0c7cb817b Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 30 Oct 2021 04:27:38 +0800 Subject: [PATCH 2/2] fix event name --- _includes/views/header.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_includes/views/header.html b/_includes/views/header.html index 64cc927c9cb..43533bba3e0 100644 --- a/_includes/views/header.html +++ b/_includes/views/header.html @@ -100,11 +100,11 @@ document.addEventListener('click', uncheckNavTrigger); var timer; - document.querySelector(".trigger").addEventListener('mouseLeave', () => { + document.querySelector(".trigger").addEventListener('mouseleave', () => { timer = setTimeout(uncheckNavTrigger, 1000); }); - document.querySelector(".trigger").addEventListener('mouseEnter', () => { + document.querySelector(".trigger").addEventListener('mouseenter', () => { if (timer) { clearTimeout(timer); }