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;