From b75a159d707127f9d01d2a82862ad24728ec7bf0 Mon Sep 17 00:00:00 2001 From: jsasg <735273025@qq.com> Date: Fri, 17 Apr 2026 12:28:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=92=99=E7=89=88=E9=81=AE?= =?UTF-8?q?=E7=9B=96=E4=B8=8B=E5=88=92=E7=BA=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/index/view/pc/public/header.html | 252 ++++++++++---------------- public/static/index/pc/css/header.css | 12 +- 2 files changed, 97 insertions(+), 167 deletions(-) diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html index 20a50d43..506ea743 100644 --- a/app/index/view/pc/public/header.html +++ b/app/index/view/pc/public/header.html @@ -350,7 +350,6 @@ if (mhk && mhk.style.display !== 'block') { // 保存当前滚动位置 scrollTopPosition = window.pageYOffset || document.documentElement.scrollTop; - mhk.style.display = 'block'; // 禁止滚动，保持位置 @@ -377,76 +376,18 @@ hasNavOpen = true; } }); - - if (!isBuyOpen && !isSearchOpen && !isLangOpen && !hasNavOpen) { mhk.style.display = 'none'; - // 恢复滚动 body.style.position = ''; body.style.top = ''; body.style.left = ''; body.style.right = ''; body.style.width = ''; - // 恢复滚动位置 window.scrollTo(0, scrollTopPosition); - } } } - - // ========== header-dropdown 导航下拉菜单打开时显示蒙版 ========== - function initNavDropdownOverlay() { - const navItems = document.querySelectorAll('.header-nav-item'); - let hideTimer = null; - - navItems.forEach(item => { - const dropdown = item.querySelector('.header-dropdown'); - if (!dropdown) return; - - // 鼠标移入导航项 - item.addEventListener('mouseenter', () => { - if (hideTimer) clearTimeout(hideTimer); - openOverlay(); - }); - - // 鼠标移出导航项 - item.addEventListener('mouseleave', () => { - hideTimer = setTimeout(() => { - const isHoveringDropdown = dropdown && dropdown.matches(':hover'); - if (!isHoveringDropdown) { - const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show'); - const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show'); - const isLangOpen = langDropdown && langDropdown.classList.contains('show'); - if (!isBuyOpen && !isSearchOpen && !isLangOpen) { - closeOverlay(); - } - } - }, 100); - }); - - // 鼠标移入下拉菜单 - dropdown.addEventListener('mouseenter', () => { - if (hideTimer) clearTimeout(hideTimer); - openOverlay(); - }); - - // 鼠标移出下拉菜单 - dropdown.addEventListener('mouseleave', () => { - hideTimer = setTimeout(() => { - const isHoveringNav = item && item.matches(':hover'); - if (!isHoveringNav) { - const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show'); - const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show'); - const isLangOpen = langDropdown && langDropdown.classList.contains('show'); - if (!isBuyOpen && !isSearchOpen && !isLangOpen) { - closeOverlay(); - } - } - }, 100); - }); - }); - } - + // 关闭所有导航下拉菜单 function closeAllNavDropdowns() { document.querySelectorAll('.header-dropdown').forEach(dropdown => { @@ -604,15 +545,13 @@ setupDropdownObserver(searchDropdown); setupDropdownObserver(langDropdown); - // ========== header-dropdown JS 控制版本（带防抖） ========== + // ========== 监听下拉菜单打开状态，自动控制蒙版 ========== + function initHeaderDropdown() { - const navItems = document.querySelectorAll('.header-nav-item'); - let hoverTimer = null; - let leaveTimer = null; - let currentOpenDropdown = null; - - // 获取所有下拉菜单并设置初始状态 + // 获取所有下拉菜单 const allDropdowns = document.querySelectorAll('.header-dropdown'); + + // 设置初始样式 allDropdowns.forEach(dropdown => { dropdown.style.opacity = '0'; dropdown.style.transform = 'translateY(-1.25em)'; @@ -620,115 +559,110 @@ dropdown.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; }); - // 显示下拉菜单 - function showDropdown(dropdown) { - if (!dropdown) return; - // 关闭当前打开的 - if (currentOpenDropdown && currentOpenDropdown !== dropdown) { - hideDropdown(currentOpenDropdown); - } - dropdown.style.opacity = '1'; - dropdown.style.transform = 'translateY(0)'; - dropdown.style.pointerEvents = 'auto'; - currentOpenDropdown = dropdown; - } - - // 隐藏下拉菜单 - function hideDropdown(dropdown) { - if (!dropdown) return; - dropdown.style.opacity = '0'; - dropdown.style.transform = 'translateY(-1.25em)'; - dropdown.style.pointerEvents = 'none'; - if (currentOpenDropdown === dropdown) { - currentOpenDropdown = null; - } - } - - // 隐藏所有下拉菜单 - function hideAllDropdowns() { - allDropdowns.forEach(dropdown => { - dropdown.style.opacity = '0'; - dropdown.style.transform = 'translateY(-1.25em)'; - dropdown.style.pointerEvents = 'none'; + // 监听单个下拉菜单的样式变化 + function observeDropdown(dropdown) { + const observer = new MutationObserver(() => { + const isOpen = dropdown.style.opacity === '1'; + if (isOpen) { + openOverlay(); + } else { + let anyOpen = false; + allDropdowns.forEach(d => { + if (d.style.opacity === '1') anyOpen = true; + }); + if (!anyOpen) { + closeOverlay(); + } + } + }); + + observer.observe(dropdown, { + attributes: true, + attributeFilter: ['style'] }); - currentOpenDropdown = null; } + // 为每个下拉菜单添加监听 + allDropdowns.forEach(dropdown => { + observeDropdown(dropdown); + }); + + // 鼠标悬停控制下拉菜单显示/隐藏 + const navItems = document.querySelectorAll('.header-nav-item'); + navItems.forEach(item => { const dropdown = item.querySelector('.header-dropdown'); if (!dropdown) return; - // 鼠标移入导航项 + let timer = null; + let isHovering = false; // 增加悬停状态标记 + + // 显示下拉菜单的函数 + const showDropdown = () => { + if (timer) clearTimeout(timer); + if (dropdown.style.opacity === '1') return; + dropdown.style.opacity = '1'; + dropdown.style.transform = 'translateY(0)'; + dropdown.style.pointerEvents = 'auto'; + }; + + // 隐藏下拉菜单的函数 + const hideDropdown = () => { + if (timer) clearTimeout(timer); + if (dropdown.style.opacity === '0') return; + dropdown.style.opacity = '0'; + dropdown.style.transform = 'translateY(-1.25em)'; + dropdown.style.pointerEvents = 'none'; + }; + item.addEventListener('mouseenter', () => { - // 清除离开定时器 - if (leaveTimer) clearTimeout(leaveTimer); - if (hoverTimer) clearTimeout(hoverTimer); + isHovering = true; + clearTimeout(timer); + showDropdown(); + }); + + item.addEventListener('mouseleave', (e) => { + isHovering = false; + // 检查鼠标是否移到了下拉菜单上 + const relatedTarget = e.relatedTarget; + const isMovingToDropdown = dropdown.contains(relatedTarget); - // 防抖：延迟100ms再显示，避免频繁触发 - hoverTimer = setTimeout(() => { - // 关闭其他弹窗（搜索、语言、购买） - if (searchDropdown) searchDropdown.classList.remove('show'); - if (langDropdown) langDropdown.classList.remove('show'); - if (buyDropdown) buyDropdown.classList.remove('show'); - - showDropdown(dropdown); - // 打开蒙版层 - if (typeof openOverlay === 'function') openOverlay(); + if (isMovingToDropdown) { + // 如果移向下拉菜单，不清除，等待下拉菜单的 mouseenter + return; + } + + timer = setTimeout(() => { + if (!isHovering && !dropdown.matches(':hover')) { + hideDropdown(); + } }, 100); }); - // 鼠标移出导航项 - item.addEventListener('mouseleave', () => { - // 清除移入定时器 - if (hoverTimer) clearTimeout(hoverTimer); - - // 延迟300ms再隐藏，给用户移动到下拉菜单的时间 - leaveTimer = setTimeout(() => { - // 检查鼠标是否在下拉菜单上 - const isHoveringDropdown = dropdown.matches(':hover'); - if (!isHoveringDropdown) { - hideDropdown(dropdown); - // 关闭蒙版层 - if (typeof closeOverlay === 'function') closeOverlay(); - } - }, 300); - }); - - // 鼠标移入下拉菜单 dropdown.addEventListener('mouseenter', () => { - if (leaveTimer) clearTimeout(leaveTimer); - showDropdown(dropdown); + isHovering = true; + clearTimeout(timer); + showDropdown(); }); - // 鼠标移出下拉菜单 - dropdown.addEventListener('mouseleave', () => { - leaveTimer = setTimeout(() => { - const isHoveringNav = item.matches(':hover'); - if (!isHoveringNav) { - hideDropdown(dropdown); - // 关闭蒙版层 - if (typeof closeOverlay === 'function') closeOverlay(); + dropdown.addEventListener('mouseleave', (e) => { + isHovering = false; + // 检查鼠标是否移回了导航项 + const relatedTarget = e.relatedTarget; + const isMovingToNavItem = item.contains(relatedTarget); + + if (isMovingToNavItem) { + return; + } + + timer = setTimeout(() => { + if (!isHovering && !item.matches(':hover')) { + hideDropdown(); } - }, 200); + }, 100); }); }); - - // 点击其他地方关闭所有下拉菜单 - document.addEventListener('click', (e) => { - if (!e.target.closest('.header-nav-item')) { - hideAllDropdowns(); - if (typeof closeOverlay === 'function') closeOverlay(); - } - }); - - // 暴露方法供外部调用 - window.headerDropdown = { - hideAll: hideAllDropdowns, - show: showDropdown, - hide: hideDropdown - }; } - // 初始化（在 DOM 加载完成后执行） if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initHeaderDropdown); @@ -750,8 +684,8 @@ } }); - // 初始化导航下拉菜单蒙版层 - initNavDropdownOverlay(); + // // 初始化导航下拉菜单蒙版层 + // initNavDropdownOverlay(); // 初始化渲染 renderHistory(); diff --git a/public/static/index/pc/css/header.css b/public/static/index/pc/css/header.css index c37a90df..6c34ce13 100644 --- a/public/static/index/pc/css/header.css +++ b/public/static/index/pc/css/header.css @@ -97,10 +97,11 @@ a { bottom: 0; left: 0; width: 100%; - height: 0.125em; + height: 2px; background-color: #004bfa; transform: scaleX(0); transition: transform 0.2s ease; + z-index: 999; } .header-nav-title:hover::after, @@ -147,12 +148,7 @@ a { transition: color 0.2s; } -/* .header-nav-btn img { - width: 1.5em; - max-width: 17px; - max-height: 17px; - height: 1.5em; -} */ + .header-nav-btn:hover { color: #004bfa; @@ -269,7 +265,7 @@ a { left: 0; right: 0; background-color: #fff; - z-index: 999; + z-index: 99; border-top: none; overflow: hidden; padding-bottom: 2.375em;