Compare commits
1 Commits
d7cb06f4a9
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| b75a159d70 |
@@ -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();
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user