1 Commits

Author SHA1 Message Date
b75a159d70 修复蒙版遮盖下划线
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 4s
2026-04-17 12:28:21 +08:00
2 changed files with 97 additions and 167 deletions

View File

@@ -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();

View File

@@ -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;