jsasg
1ed900d2b5
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
759 lines
29 KiB
HTML
759 lines
29 KiB
HTML
<link rel="stylesheet" href="__CSS__/new_header.css">
|
||
<header>
|
||
<div class="mobile-header-box">
|
||
<div class="mobile-header-left">
|
||
<img src="__IMAGES__/header/nav.png" class="nav-img">
|
||
<img src="__IMAGES__/header/x.png" class="nav-img1">
|
||
<a href="/" target="_self" style="display: flex; justify-content: center;">
|
||
<img src="__IMAGES__/logo.png" class="nav-log">
|
||
</a>
|
||
</div>
|
||
<div class="mobile-header-right">
|
||
<img src="__IMAGES__/header/search.png" class="nav-search">
|
||
<img src="__IMAGES__/header/lang.png" class="nav-lang">
|
||
<img src="__IMAGES__/header/card.png" class="nav-card">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav-dropdown-menu">
|
||
<!-- 产品列表 - 有子菜单 -->
|
||
<div class="menu-item has-child">
|
||
<div class="menu-item-box">
|
||
<span>{:lang_i18n('产品列表')}</span>
|
||
<img src="__IMAGES__/header/b.png" class="menu-item-img">
|
||
</div>
|
||
{if condition="!empty($header_categorys)"}
|
||
<div class="sub-menu" style="overflow-y: auto;">
|
||
{volist name="header_categorys" id="vo" key="idx"}
|
||
<div class="sub-item"><a href="{:url('product/classify', ['id' => $vo.id])}" target="_self">{$vo.name}</a></div>
|
||
{/volist}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
{if condition="!empty($header_navigation)"}
|
||
{volist name="header_navigation" id="nav"}
|
||
{empty name='nav.children'}
|
||
<div class="menu-item no-child" data-link="{$nav.link}">
|
||
{else/}
|
||
<div class="menu-item has-child" data-link="{$nav.link}">
|
||
{/empty}
|
||
<div class="menu-item-box">
|
||
<span>{$nav.name}</span>
|
||
<img src="__IMAGES__/header/b.png" class="menu-item-img">
|
||
</div>
|
||
{if condition="!empty($nav.children)"}
|
||
<div class="sub-menu" style="border: none;" >
|
||
{volist name="nav.children" id="child"}
|
||
<div class="sub-item no-padding ">
|
||
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}" class="sub-item-card">
|
||
<img src="{$child.image}" alt="" class="sub-item-card-img">
|
||
<div class="sub-item-card-title">{$child.name}</div>
|
||
<div class="sub-item-card-name">{$child.desc}</div>
|
||
</a>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- ====================== 购物车弹窗 ====================== -->
|
||
<div class="modal-overlay" id="cartModal">
|
||
<div class="modal-content">
|
||
<img src="__IMAGES__/header/x.png" class="modal-close">
|
||
{if condition="!empty($header_mall_entrance)"}
|
||
<div class="modal-items-list">
|
||
{volist name="header_mall_entrance" id="ma"}
|
||
{if condition="!empty($ma.link)"}
|
||
<a class="modal-item" href="{$ma.link}" target="_self">
|
||
<img src="{$ma.image}" alt="" class="modal-item-img">
|
||
<div class="modal-item-title">{$ma.name}</div>
|
||
</a>
|
||
{else/}
|
||
<!--悬浮图-->
|
||
<div class="modal-item" data-link="{$ma.link}" style="cursor: pointer;">
|
||
<img src="{$ma.image}" alt="" class="modal-item-img">
|
||
<div class="modal-item-title">{$ma.name}</div>
|
||
</div>
|
||
<div class="modal-item" style="display:none">
|
||
<img src="{$ma.hover_image}" alt="" class="modal-item-img">
|
||
</div>
|
||
{/if}
|
||
{/volist}
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== 语言弹窗 ====================== -->
|
||
<div class="modal-overlay" id="langModal">
|
||
<div class="lang-modal-content">
|
||
<img src="__IMAGES__/header/x.png" class="modal-close">
|
||
<div class="lang-items-list">
|
||
{volist name="header_languages" id="la"}
|
||
<a class="lang-item" href="{$la.lang_url}" target="_self">
|
||
<img src="{$la.lang_icon}" />
|
||
<div>{$la.country_en_name} - {$la.lang_en_name}</div>
|
||
</a>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====================== 搜索弹窗 ====================== -->
|
||
<div class="modal-overlay" id="searchModal">
|
||
<div class="search-modal-content">
|
||
<img src="__IMAGES__/header/x.png" class="modal-close">
|
||
<div class="search-input-box">
|
||
<input type="text" placeholder="{:lang_i18n('请输入搜索关键词')}" id="searchInput">
|
||
|
||
<div class="search-clear-box">
|
||
<img src="__IMAGES__/header/x.png" alt="{:lang_i18n('清除')}" class="search-clear-btn" id="searchClearBtn" style="display: none;">
|
||
</div>
|
||
<!-- <span style="width: 1px; color:#d9d9d9;margin: 0 10px;">|</span> -->
|
||
<div class="search-submit-box">
|
||
<img src="__IMAGES__/header/search.png" alt="{:lang_i18n('搜索')}" class="search-submit-icon" id="searchSubmit">
|
||
</div>
|
||
</div>
|
||
<div class="search-history">
|
||
<div class="search-history-header">
|
||
<div class="search-history-title">{:lang_i18n('搜索记录')}</div>
|
||
<div class="search-history-clear" id="clearAllHistory">{:lang_i18n('清空')}</div>
|
||
</div>
|
||
<div class="search-history-list" id="searchHistoryList">
|
||
<!-- 搜索记录会动态显示在这里 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function ()
|
||
{
|
||
const navBtn = document.querySelector('.nav-img');
|
||
const navBtn1 = document.querySelector('.nav-img1');
|
||
const dropdownMenu = document.querySelector('.nav-dropdown-menu');
|
||
|
||
// 禁止body滚动
|
||
function disableBodyScroll() {
|
||
document.body.style.overflow = 'hidden';
|
||
document.body.style.position = 'fixed';
|
||
document.body.style.top = `-${window.scrollY}px`;
|
||
document.body.style.width = '100%';
|
||
}
|
||
|
||
// 恢复body滚动
|
||
function enableBodyScroll() {
|
||
const scrollY = document.body.style.top;
|
||
document.body.style.overflow = '';
|
||
document.body.style.position = '';
|
||
document.body.style.top = '';
|
||
document.body.style.width = '';
|
||
if (scrollY) {
|
||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||
}
|
||
}
|
||
|
||
// 复位所有子菜单（关闭并重置滚动位置）
|
||
function resetAllSubMenus() {
|
||
let hasOpenMenu = false;
|
||
document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
|
||
if (subMenu.classList.contains('show')) {
|
||
hasOpenMenu = true;
|
||
}
|
||
subMenu.classList.remove('show');
|
||
// 重置滚动位置到顶部
|
||
subMenu.scrollTop = 0;
|
||
});
|
||
document.querySelectorAll('.has-child').forEach(function(item) {
|
||
item.classList.remove('open');
|
||
});
|
||
|
||
// 如果没有打开的菜单，恢复body滚动
|
||
if (!hasOpenMenu) {
|
||
enableBodyScroll();
|
||
}
|
||
}
|
||
|
||
// 关闭单个子菜单并重置滚动位置
|
||
function closeSubMenu(subMenu, menuItem) {
|
||
if (subMenu) {
|
||
subMenu.classList.remove('show');
|
||
subMenu.scrollTop = 0; // 重置滚动位置
|
||
}
|
||
if (menuItem) {
|
||
menuItem.classList.remove('open');
|
||
}
|
||
// 检查是否还有其他打开的菜单
|
||
const anyOpen = document.querySelector('.has-child .sub-menu.show');
|
||
if (!anyOpen) {
|
||
enableBodyScroll();
|
||
}
|
||
}
|
||
|
||
// 打开子菜单
|
||
function openSubMenu(subMenu, menuItem) {
|
||
// 禁止body滚动
|
||
disableBodyScroll();
|
||
|
||
subMenu.classList.add('show');
|
||
menuItem.classList.add('open');
|
||
// 确保新打开的菜单滚动位置在顶部
|
||
subMenu.scrollTop = 0;
|
||
}
|
||
|
||
// 打开菜单
|
||
navBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 禁止body滚动
|
||
disableBodyScroll();
|
||
// 关闭所有弹窗
|
||
closeAllModals();
|
||
dropdownMenu.classList.add('show');
|
||
navBtn.style.display = 'none';
|
||
navBtn1.style.display = 'block';
|
||
});
|
||
|
||
// 关闭菜单 - 复位所有子菜单
|
||
navBtn1.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
|
||
// 复位所有子菜单到初始状态
|
||
resetAllSubMenus();
|
||
});
|
||
|
||
// ====================== 处理所有菜单项（同一时间只展开一个） ======================
|
||
document.querySelectorAll('.menu-item').forEach(function (item)
|
||
{
|
||
const isHasChild = item.classList.contains('has-child');
|
||
const subMenu = item.querySelector('.sub-menu');
|
||
const box = item.querySelector('.menu-item-box');
|
||
|
||
if (isHasChild && subMenu) {
|
||
// 移除原有事件，重新绑定（确保只有一个展开）
|
||
const newBox = box.cloneNode(true);
|
||
box.parentNode.replaceChild(newBox, box);
|
||
|
||
newBox.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
|
||
// 检查当前是否已展开
|
||
const isOpen = subMenu.classList.contains('show');
|
||
|
||
// 关闭所有其他子菜单并重置滚动位置
|
||
document.querySelectorAll('.has-child').forEach(function (otherItem) {
|
||
const otherSubMenu = otherItem.querySelector('.sub-menu');
|
||
if (otherSubMenu && otherSubMenu !== subMenu) {
|
||
otherSubMenu.classList.remove('show');
|
||
otherSubMenu.scrollTop = 0; // 重置滚动位置
|
||
otherItem.classList.remove('open');
|
||
}
|
||
});
|
||
|
||
// 切换当前菜单
|
||
if (!isOpen) {
|
||
openSubMenu(subMenu, item);
|
||
} else {
|
||
closeSubMenu(subMenu, item);
|
||
}
|
||
});
|
||
} else {
|
||
const link = item.getAttribute('data-link');
|
||
if (link) {
|
||
item.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
window.location.href = link;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
// 阻止子菜单链接冒泡
|
||
document.querySelectorAll('.sub-item').forEach(function (sub)
|
||
{
|
||
sub.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
});
|
||
});
|
||
|
||
dropdownMenu.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
});
|
||
|
||
navBtn1.style.display = 'none';
|
||
navBtn.style.display = 'block';
|
||
|
||
// 关闭所有弹窗的公共函数
|
||
function closeAllModals ()
|
||
{
|
||
cartModal.classList.remove('show');
|
||
langModal.classList.remove('show');
|
||
searchModal.classList.remove('show');
|
||
if (searchInput) {
|
||
searchInput.value = '';
|
||
if (searchClearBtn) searchClearBtn.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
// ====================== 购物车弹窗交互 ======================
|
||
const cardBtn = document.querySelector('.nav-card');
|
||
const cartModal = document.getElementById('cartModal');
|
||
const cartModalClose = cartModal.querySelector('.modal-close');
|
||
|
||
cardBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭下拉菜单和其他弹窗
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
closeAllModals();
|
||
// 复位所有子菜单
|
||
resetAllSubMenus();
|
||
cartModal.classList.add('show');
|
||
});
|
||
|
||
cartModalClose.addEventListener('click', function ()
|
||
{
|
||
cartModal.classList.remove('show');
|
||
});
|
||
|
||
cartModal.addEventListener('click', function (e)
|
||
{
|
||
if (e.target === cartModal) {
|
||
cartModal.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
// ====================== 语言弹窗交互 ======================
|
||
const langBtn = document.querySelector('.nav-lang');
|
||
const langModal = document.getElementById('langModal');
|
||
const langModalClose = langModal.querySelector('.modal-close');
|
||
|
||
langBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭下拉菜单和其他弹窗
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
closeAllModals();
|
||
// 复位所有子菜单
|
||
resetAllSubMenus();
|
||
langModal.classList.add('show');
|
||
});
|
||
|
||
langModalClose.addEventListener('click', function ()
|
||
{
|
||
langModal.classList.remove('show');
|
||
});
|
||
|
||
langModal.addEventListener('click', function (e)
|
||
{
|
||
if (e.target === langModal) {
|
||
langModal.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll('.lang-item').forEach(function (item)
|
||
{
|
||
item.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
console.log('选择了语言:', this.innerText);
|
||
langModal.classList.remove('show');
|
||
});
|
||
});
|
||
|
||
// ====================== 搜索记录功能 ======================
|
||
// 获取搜索记录
|
||
function getSearchHistory ()
|
||
{
|
||
const history = localStorage.getItem('searchHistory');
|
||
return history ? JSON.parse(history) : [];
|
||
}
|
||
|
||
// 保存搜索记录
|
||
function saveSearchHistory (history)
|
||
{
|
||
localStorage.setItem('searchHistory', JSON.stringify(history));
|
||
}
|
||
|
||
// 添加搜索记录
|
||
function addSearchHistory (keyword)
|
||
{
|
||
if (!keyword || !keyword.trim()) return;
|
||
keyword = keyword.trim();
|
||
let history = getSearchHistory();
|
||
history = history.filter(item => item !== keyword);
|
||
history.unshift(keyword);
|
||
if (history.length > 10) {
|
||
history = history.slice(0, 10);
|
||
}
|
||
saveSearchHistory(history);
|
||
renderSearchHistory();
|
||
}
|
||
|
||
// 删除单条搜索记录
|
||
function deleteSearchHistoryItem (keyword)
|
||
{
|
||
let history = getSearchHistory();
|
||
history = history.filter(item => item !== keyword);
|
||
saveSearchHistory(history);
|
||
renderSearchHistory();
|
||
}
|
||
|
||
// 清空所有搜索记录
|
||
function clearAllSearchHistory ()
|
||
{
|
||
saveSearchHistory([]);
|
||
renderSearchHistory();
|
||
}
|
||
|
||
// 渲染搜索记录列表
|
||
function renderSearchHistory ()
|
||
{
|
||
const historyList = document.getElementById('searchHistoryList');
|
||
const history = getSearchHistory();
|
||
|
||
if (!historyList) return;
|
||
|
||
if (history.length === 0) {
|
||
historyList.innerHTML = '<div class="empty-history">暂无搜索记录</div>';
|
||
return;
|
||
}
|
||
|
||
historyList.innerHTML = '';
|
||
history.forEach(function (keyword)
|
||
{
|
||
const itemDiv = document.createElement('div');
|
||
itemDiv.className = 'search-history-item';
|
||
itemDiv.innerHTML = `
|
||
<span>${escapeHtml(keyword)}</span>
|
||
<img src="__IMAGES__/header/x.png" class="delete-icon" data-keyword="${escapeHtml(keyword)}">
|
||
`;
|
||
itemDiv.addEventListener('click', function (e)
|
||
{
|
||
if (e.target.classList && e.target.classList.contains('delete-icon')) {
|
||
e.stopPropagation();
|
||
deleteSearchHistoryItem(keyword);
|
||
} else {
|
||
e.stopPropagation();
|
||
searchInput.value = keyword;
|
||
doSearch(keyword);
|
||
}
|
||
});
|
||
historyList.appendChild(itemDiv);
|
||
});
|
||
}
|
||
|
||
// 简单的防XSS
|
||
function escapeHtml (str)
|
||
{
|
||
return str.replace(/[&<>]/g, function (m)
|
||
{
|
||
if (m === '&') return '&';
|
||
if (m === '<') return '<';
|
||
if (m === '>') return '>';
|
||
return m;
|
||
});
|
||
}
|
||
|
||
// ====================== 搜索弹窗交互 ======================
|
||
const searchBtn = document.querySelector('.nav-search');
|
||
const searchModal = document.getElementById('searchModal');
|
||
const searchModalClose = searchModal.querySelector('.modal-close');
|
||
const searchInput = document.getElementById('searchInput');
|
||
const searchSubmit = document.getElementById('searchSubmit');
|
||
const searchClearBtn = document.getElementById('searchClearBtn');
|
||
const clearAllHistoryBtn = document.getElementById('clearAllHistory');
|
||
|
||
searchInput.addEventListener('input', function (e)
|
||
{
|
||
if (searchInput.value.length > 0) {
|
||
searchClearBtn.style.display = 'block';
|
||
} else {
|
||
searchClearBtn.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
searchClearBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
searchInput.focus();
|
||
});
|
||
|
||
if (clearAllHistoryBtn) {
|
||
clearAllHistoryBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
clearAllSearchHistory();
|
||
});
|
||
}
|
||
|
||
searchBtn.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
// 关闭下拉菜单和其他弹窗
|
||
dropdownMenu.classList.remove('show');
|
||
navBtn.style.display = 'block';
|
||
navBtn1.style.display = 'none';
|
||
closeAllModals();
|
||
// 复位所有子菜单
|
||
resetAllSubMenus();
|
||
renderSearchHistory();
|
||
searchModal.classList.add('show');
|
||
setTimeout(() =>
|
||
{
|
||
searchInput.focus();
|
||
}, 100);
|
||
});
|
||
|
||
searchModalClose.addEventListener('click', function ()
|
||
{
|
||
searchModal.classList.remove('show');
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
});
|
||
|
||
searchModal.addEventListener('click', function (e)
|
||
{
|
||
if (e.target === searchModal) {
|
||
searchModal.classList.remove('show');
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 执行搜索
|
||
function doSearch (keyword)
|
||
{
|
||
if (keyword && keyword.trim()) {
|
||
const searchKeyword = keyword.trim();
|
||
console.log('搜索关键词:', searchKeyword);
|
||
if (searchKeyword) {
|
||
addSearchHistory(searchKeyword);
|
||
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(searchKeyword);
|
||
searchModal.classList.remove('show');
|
||
searchInput.value = '';
|
||
searchClearBtn.style.display = 'none';
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
searchSubmit.addEventListener('click', function (e)
|
||
{
|
||
e.stopPropagation();
|
||
doSearch(searchInput.value);
|
||
});
|
||
|
||
searchInput.addEventListener('keypress', function (e)
|
||
{
|
||
console.log(e,'========e=============')
|
||
if (e.key === 'Enter' || e.key === 'enter' || e.keyCode === 13) {
|
||
e.preventDefault();
|
||
doSearch(searchInput.value);
|
||
}
|
||
});
|
||
|
||
// ====================== 添加：点击空白区域关闭所有子菜单 ======================
|
||
document.addEventListener('click', function(e) {
|
||
// 如果点击的不是菜单项内部，关闭所有子菜单
|
||
if (!e.target.closest('.menu-item')) {
|
||
resetAllSubMenus();
|
||
}
|
||
});
|
||
|
||
// ====================== 动态计算子菜单高度并添加滚动功能（产品列表除外） ======================
|
||
// 判断是否为产品列表（第一个菜单项）
|
||
function isProductList(menuItem) {
|
||
const firstMenuItem = document.querySelector('.menu-item');
|
||
return menuItem === firstMenuItem;
|
||
}
|
||
|
||
// 设置子菜单的最大高度
|
||
function setSubMenuHeight(subMenu, menuItem) {
|
||
if (!subMenu || !menuItem) return;
|
||
|
||
// 产品列表不处理
|
||
if (isProductList(menuItem)) {
|
||
subMenu.style.maxHeight = '';
|
||
subMenu.style.overflowY = '';
|
||
return;
|
||
}
|
||
|
||
// 获取菜单位置信息
|
||
const rect = menuItem.getBoundingClientRect();
|
||
const bottomSpace = 50; // 底部留白空间
|
||
|
||
// 计算可用高度 = 视口高度 - 菜单顶部距离 - 底部留白
|
||
let availableHeight = window.innerHeight - rect.top - bottomSpace;
|
||
|
||
// 限制最小高度
|
||
if (availableHeight < 200) {
|
||
availableHeight = 200;
|
||
}
|
||
|
||
// 设置子菜单的最大高度和滚动
|
||
subMenu.style.maxHeight = availableHeight + 'px';
|
||
subMenu.style.overflowY = 'auto';
|
||
subMenu.style.overflowX = 'hidden';
|
||
subMenu.style.WebkitOverflowScrolling = 'touch';
|
||
}
|
||
|
||
// 为所有有子菜单的导航项（产品列表除外）绑定事件
|
||
const allMenuItems = document.querySelectorAll('.has-child');
|
||
|
||
allMenuItems.forEach(function(menuItem) {
|
||
const subMenu = menuItem.querySelector('.sub-menu');
|
||
const box = menuItem.querySelector('.menu-item-box');
|
||
|
||
if (!subMenu || !box) return;
|
||
|
||
// 产品列表不处理滚动功能
|
||
if (isProductList(menuItem)) {
|
||
return;
|
||
}
|
||
|
||
// 添加点击事件处理高度
|
||
box.addEventListener('click', function(e) {
|
||
// 如果子菜单即将打开，计算高度
|
||
if (!subMenu.classList.contains('show')) {
|
||
// 延迟一帧，确保DOM已更新
|
||
setTimeout(function() {
|
||
setSubMenuHeight(subMenu, menuItem);
|
||
// 确保滚动位置在顶部
|
||
subMenu.scrollTop = 0;
|
||
}, 0);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 窗口大小改变时，重新计算已打开的子菜单高度
|
||
window.addEventListener('resize', function() {
|
||
const openSubMenus = document.querySelectorAll('.has-child .sub-menu.show');
|
||
openSubMenus.forEach(function(subMenu) {
|
||
const menuItem = subMenu.closest('.has-child');
|
||
if (menuItem && !isProductList(menuItem)) {
|
||
setSubMenuHeight(subMenu, menuItem);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 监听菜单打开状态变化（使用 MutationObserver 确保高度正确设置）
|
||
const observer = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function(mutation) {
|
||
if (mutation.attributeName === 'class') {
|
||
const target = mutation.target;
|
||
if (target.classList && target.classList.contains('sub-menu') && target.classList.contains('show')) {
|
||
const menuItem = target.closest('.has-child');
|
||
if (menuItem && !isProductList(menuItem)) {
|
||
setSubMenuHeight(target, menuItem);
|
||
// 确保滚动位置在顶部
|
||
target.scrollTop = 0;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 观察所有子菜单的class变化
|
||
document.querySelectorAll('.has-child .sub-menu').forEach(function(subMenu) {
|
||
observer.observe(subMenu, { attributes: true });
|
||
});
|
||
|
||
// ====================== 购物车弹窗悬浮图功能 ======================
|
||
// 处理购物车弹窗中的图片悬浮效果
|
||
function initCartModalHover() {
|
||
const modalItems = document.querySelectorAll('#cartModal .modal-item');
|
||
|
||
modalItems.forEach(function(item) {
|
||
// 查找当前item中是否有悬浮图（隐藏的那个）
|
||
const defaultImg = item.querySelector('.modal-item-img');
|
||
const hiddenItem = item.nextElementSibling;
|
||
let hoverImg = null;
|
||
|
||
// 检查下一个元素是否是隐藏的悬浮图容器
|
||
if (hiddenItem && hiddenItem.classList && hiddenItem.classList.contains('modal-item') && hiddenItem.style.display === 'none') {
|
||
hoverImg = hiddenItem.querySelector('.modal-item-img');
|
||
}
|
||
|
||
// 如果有悬浮图
|
||
if (hoverImg && defaultImg) {
|
||
const originalSrc = defaultImg.src;
|
||
const hoverSrc = hoverImg.src;
|
||
const link = item.getAttribute('data-link');
|
||
|
||
// 移除原有的href，因为需要悬浮图效果
|
||
item.style.cursor = 'pointer';
|
||
|
||
// 鼠标移入：显示悬浮图
|
||
item.addEventListener('mouseenter', function(e) {
|
||
e.stopPropagation();
|
||
defaultImg.src = hoverSrc;
|
||
});
|
||
|
||
// 鼠标移出：恢复普通图
|
||
item.addEventListener('mouseleave', function(e) {
|
||
e.stopPropagation();
|
||
defaultImg.src = originalSrc;
|
||
});
|
||
|
||
// 点击事件：如果有链接就跳转
|
||
item.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
if (link && link !== '#') {
|
||
window.location.href = link;
|
||
}
|
||
});
|
||
} else {
|
||
// 没有悬浮图，保持原有链接
|
||
const link = item.getAttribute('href') || item.getAttribute('data-link');
|
||
if (link && link !== '#') {
|
||
item.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
window.location.href = link;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 在购物车弹窗打开时初始化悬浮图功能
|
||
const cartModalObserver = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function(mutation) {
|
||
if (mutation.attributeName === 'class') {
|
||
if (cartModal.classList.contains('show')) {
|
||
setTimeout(function() {
|
||
initCartModalHover();
|
||
}, 50);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
if (cartModal) {
|
||
cartModalObserver.observe(cartModal, { attributes: true });
|
||
// 如果弹窗默认是打开的，也初始化一次
|
||
if (cartModal.classList.contains('show')) {
|
||
initCartModalHover();
|
||
}
|
||
}
|
||
});
|
||
</script>
|