删除无用备份
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
This commit is contained in:
@@ -1,287 +0,0 @@
|
||||
<header class="header-PC">
|
||||
<div id="header">
|
||||
<!-- LOG -->
|
||||
<div class="nav1">
|
||||
<a href="/">
|
||||
<img src="__IMAGES__/logo.png" />
|
||||
</a>
|
||||
</div>
|
||||
<!--顶部导航栏 -->
|
||||
<div class="nav2">
|
||||
<nav id="booNavigation" class="booNavigation">
|
||||
<ul>
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<li class="navItem">
|
||||
<a href="javascript:void(0);">{:lang_i18n('产品列表')}</a>
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<ol class="navItemConten">
|
||||
<!-- 左边子菜单-->
|
||||
<ul class="navItem_cyleft">
|
||||
{volist name="header_categorys" id="vo"}
|
||||
<li class="{$key == 0 ? 'it_active' : ''}">
|
||||
<a href="{:url('product/category', ['id' => $vo.id])}">{$vo.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
<!-- 右边子菜单-->
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="navItem_cyright" {eq name="idx" value="1" }style="display: block;"{else/}style="display: none;"{/eq}>
|
||||
{if condition="!empty($vo.children)"}
|
||||
{volist name="vo.children" id="vc"}
|
||||
<dl class="nav_cyrightit">
|
||||
<dt>
|
||||
<a href="{:url('product/subcategory', ['id' => $vc.id])}">{$vc.name}</a>
|
||||
</dt>
|
||||
{if condition="!empty($vc.children)"}
|
||||
{volist name="vc.children" id="vcc"}
|
||||
<dd>
|
||||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}">{$vcc.name}</a>
|
||||
</dd>
|
||||
{/volist}
|
||||
{/if}
|
||||
</dl>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
</ol>
|
||||
</li>
|
||||
{/if}
|
||||
{volist name="header_navigation" id="vo"}
|
||||
<li class="navItem">
|
||||
<a href="{$vo.link}" target="{$vo.blank==1?'_blank':'_self'}">{$vo.name}</a>
|
||||
{if condition="!empty($vo.children)"}
|
||||
<img src="__IMAGES__/black-down.png" class="downimg" />
|
||||
<!--下拉菜单 -->
|
||||
<ol class="navItemConten1">
|
||||
{volist name="vo.children" id="voc"}
|
||||
<li>
|
||||
<a href="{$voc.link}" target="{$voc.blank==1?'_blank':'_self'}">{$voc.name}</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ol>
|
||||
{/if}
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- 顶部搜索/国家选择/商店-->
|
||||
<div class="nav3">
|
||||
<img src="__IMAGES__/icon-search.png" id="openModalBtn" class="searchimg" />
|
||||
<div class="choesCountry">
|
||||
<img src="__IMAGES__/icon-language.png" id="countrycheck" class="checkimg" />
|
||||
<!--国家选择 -->
|
||||
<div class="topCountry" id="top-country">
|
||||
<ul>
|
||||
<li class="closec">
|
||||
<span class="closecountrybt">×</span>
|
||||
</li>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}">
|
||||
<li>
|
||||
<div class="cico">
|
||||
<img src="{$vo.lang_icon}" class="countryimg" />
|
||||
</div>
|
||||
<p class="countryName">{$vo.country_en_name} - {$vo.lang_en_name}</p>
|
||||
</li>
|
||||
</a>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{eq name=":cookie('think_lang')" value="en-us"}
|
||||
{notempty name="basic_config['navigation_store_url']['value']"}
|
||||
<a class="storetopbt" href="{$basic_config['navigation_store_url']['value']}" target="_blank">
|
||||
<img src="__IMAGES__/shopico.png" class="storeImgico" />{:lang_i18n('店铺')}
|
||||
</a>
|
||||
{/notempty}
|
||||
{/eq}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索弹框-->
|
||||
<div class="searchmodalMian" id="scmodal">
|
||||
<div class="searchmodalct">
|
||||
<span class="close-btn">×</span>
|
||||
<input type="text" name="keywords" id="serrchinput" autocomplete="off" />
|
||||
<!-- 历史记录 -->
|
||||
<div class="searchhistory">
|
||||
<p class="h_title">{:lang_i18n('搜索记录')}</p>
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div class="popProduct">
|
||||
<p class="h_title">{:lang_i18n('热销产品')}</p>
|
||||
<div class="popmain">
|
||||
{volist name="header_hot_products" id="vo"}
|
||||
<div class="popitem">
|
||||
<a href="{:url('product/detail', ['id' => $vo.id])}"><img src="{:thumb($vo.cover_image)}" class="popimg" /></a>
|
||||
<div class="productName">{$vo.name}</div>
|
||||
<div class="produc-dec">{$vo.short_name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('.header-PC #header .navItem>a').each(function(idx, item) {
|
||||
var _item = $(item);
|
||||
_item.removeClass('active');
|
||||
if (_item.attr('href') && compareUrls(location.href, _item.get(0).href)) {
|
||||
_item.addClass('active').siblings();
|
||||
}
|
||||
});
|
||||
|
||||
// 比较两个URL是否相等（支持只有path的情况，并处理有无.html后缀的情况）
|
||||
function compareUrls(url1, url2) {
|
||||
// 如果输入的是相对路径，添加当前域名
|
||||
if (!url1.startsWith('http')) {
|
||||
url1 = window.location.origin + (url1.startsWith('/') ? '' : '/') + url1;
|
||||
}
|
||||
if (!url2.startsWith('http')) {
|
||||
url2 = window.location.origin + (url2.startsWith('/') ? '' : '/') + url2;
|
||||
}
|
||||
|
||||
// 将两个URL转换为URL对象
|
||||
const urlObj1 = new URL(url1);
|
||||
const urlObj2 = new URL(url2);
|
||||
|
||||
// 获取路径名并移除末尾的斜杠
|
||||
let path1 = urlObj1.pathname.replace(/\/$/, '');
|
||||
let path2 = urlObj2.pathname.replace(/\/$/, '');
|
||||
|
||||
// 移除.html后缀
|
||||
path1 = path1.replace(/\.html$/, '');
|
||||
path2 = path2.replace(/\.html$/, '');
|
||||
|
||||
// 比较处理后的路径
|
||||
return path1 === path2;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// 搜索历史记录处理
|
||||
function history(keywords) {
|
||||
var history = localStorage.getItem('header_search_keywords');
|
||||
if (!history) {
|
||||
history = [];
|
||||
} else {
|
||||
history = JSON.parse(history);
|
||||
}
|
||||
// 记录搜索关键词
|
||||
if (keywords) {
|
||||
if (history.includes(keywords)) {
|
||||
history.splice(history.indexOf(keywords), 1);
|
||||
}
|
||||
history.unshift(keywords);
|
||||
if (history.length > 3) {
|
||||
history.pop();
|
||||
}
|
||||
localStorage.setItem('header_search_keywords', JSON.stringify(history));
|
||||
return history;
|
||||
}
|
||||
|
||||
// 回显搜索历史记录
|
||||
history.forEach(function (item) {
|
||||
$('.searchhistory ul').append('<li><a href="{:url(\'product/search\')}?keywords=' + item + '">' + item + '</a></li>');
|
||||
});
|
||||
|
||||
return history;
|
||||
}
|
||||
|
||||
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
||||
function handleHover($element, $content) {
|
||||
// 同时支持鼠标悬停和点击事件
|
||||
$element
|
||||
.mouseenter(function () {
|
||||
$content.stop(true, true).slideDown(60);
|
||||
})
|
||||
.mouseleave(function () {
|
||||
$content.stop(true, true).slideUp(60);
|
||||
})
|
||||
.click(function (e) {
|
||||
// 阻止链接默认跳转（如果有链接的话）
|
||||
if ($content.is(':visible')) {
|
||||
$content.stop(true, true).slideUp(60);
|
||||
} else {
|
||||
$content.stop(true, true).slideDown(60);
|
||||
}
|
||||
// 防止点击事件冒泡到a标签
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
// 处理产品列表的下拉菜单
|
||||
var $firstNav = $('.navItem').eq(0);
|
||||
if ($firstNav.find('.navItemConten').length) {
|
||||
handleHover($firstNav, $firstNav.find('.navItemConten'));
|
||||
}
|
||||
|
||||
// 鼠标移入左侧子菜单切换显示
|
||||
$('.navItem_cyleft li').mouseenter(function () {
|
||||
$(this).addClass('it_active').siblings().removeClass('it_active');
|
||||
$('.navItem_cyright').hide();
|
||||
$('.navItem_cyright').eq($(this).index()).show();
|
||||
});
|
||||
|
||||
// 动态处理所有带有navItemConten1的导航项
|
||||
$('.navItem').each(function () {
|
||||
var $this = $(this);
|
||||
var $dropdown = $this.find('.navItemConten1');
|
||||
// 只给有下拉菜单的导航项绑定事件
|
||||
if ($dropdown.length) {
|
||||
handleHover($this, $dropdown);
|
||||
}
|
||||
});
|
||||
|
||||
// 点击搜索
|
||||
$('#openModalBtn').click(function () {
|
||||
$('#scmodal').toggle();
|
||||
});
|
||||
$('.close-btn').click(function () {
|
||||
$('#scmodal').hide();
|
||||
});
|
||||
|
||||
// 点击空白处关闭下拉菜单
|
||||
$(document).click(function () {
|
||||
$('.navItemConten, .navItemConten1, #top-country').slideUp(60);
|
||||
});
|
||||
|
||||
// 防止下拉菜单内部点击触发空白处关闭事件
|
||||
$('.navItemConten, .navItemConten1, #top-country').click(function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// 搜索历史记录回显
|
||||
history();
|
||||
|
||||
// 执行搜索
|
||||
$('#serrchinput').keydown(function (event) {
|
||||
if (event.originalEvent.keyCode == 13) {
|
||||
var keywords = $(this).val();
|
||||
if (keywords == '') {
|
||||
return false;
|
||||
}
|
||||
// 记录搜索关键词
|
||||
history(keywords);
|
||||
|
||||
// 跳转到搜索页面
|
||||
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
||||
}
|
||||
});
|
||||
|
||||
// 点击选择国家
|
||||
$('#countrycheck').click(function (e) {
|
||||
$('#top-country').toggle();
|
||||
e.stopPropagation();
|
||||
});
|
||||
$('.closecountrybt').click(function () {
|
||||
$('#top-country').hide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,893 +0,0 @@
|
||||
<link rel="stylesheet" href="__CSS__/header.css">
|
||||
<div class="header" >
|
||||
<!-- 导航外容器：1920px宽，下拉框基于此定位 -->
|
||||
<div class="header-nav-outer" >
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="header-nav-bar">
|
||||
<div style="display:flex;align-items:center">
|
||||
<a href="/" style="display:flex;align-items:center">
|
||||
<img src="__IMAGES__/logo.png" alt="orico" class="header-log">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-nav-items">
|
||||
{if condition="!empty($header_categorys)"}
|
||||
<div class="header-nav-item">
|
||||
<div class="header-nav-title">{:lang_i18n('产品列表')}</div>
|
||||
<div class="header-dropdown" >
|
||||
<div class="header-dropdown-tabs">
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-tab-item {if condition="$idx == 1"}active{/if}" data-tab="tag-{$vo.id}">{$vo.name}</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{volist name="header_categorys" id="vo" key="idx"}
|
||||
<div class="header-dropdown-content header-tab-content {if condition="$idx == 1"}active{/if}" id="tag-{$vo.id}">
|
||||
<div class="header-dropdown-category">
|
||||
{if condition="!empty($vo.children)"}
|
||||
{volist name="vo.children" id="vc"}
|
||||
<div class="header-category-box">
|
||||
{volist name="vc" id="vcc"}
|
||||
<div class="header-category-block">
|
||||
<div class="header-category-title">
|
||||
<a href="{:url('product/subcategory', ['id' => $vcc.id])}" target="_self">
|
||||
{$vcc.name}
|
||||
</a>
|
||||
</div>
|
||||
<ul class="header-category-list">
|
||||
{if condition="!empty($vcc.children)"}
|
||||
{volist name="vcc.children" id="vccc" length="4"}
|
||||
<li class="header-category-item">
|
||||
<a href="{:url('product/subcategory', ['id' => $vccc.id])}" target="_self">
|
||||
{$vccc.name}
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="header-dropdown-products">
|
||||
{if condition="!empty($vo.recommends)"}
|
||||
{volist name="vo.recommends" id="recommend"}
|
||||
<div class="header-product-card">
|
||||
<a href="{$recommend.link}">
|
||||
<div class="header-product-img">
|
||||
<img src="{$recommend.image}" alt="">
|
||||
</div>
|
||||
<div class="header-product-name">{$recommend.title}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{if condition="!empty($header_navigation)"}
|
||||
{volist name="header_navigation" id="nav"}
|
||||
<div class="header-nav-item">
|
||||
{if condition="empty($nav.children)"}
|
||||
<div class="header-nav-title">
|
||||
<a href="{$nav.link}" target="{$nav.blank==1?'_blank':'_self'}">{$nav.name}</a>
|
||||
</div>
|
||||
{else /}
|
||||
<div class="header-nav-title">{$nav.name}</div>
|
||||
<!-- style="display: block;" -->
|
||||
<div class="header-dropdown" >
|
||||
<div class="header-dropdown-content1">
|
||||
{volist name="nav.children" id="child"}
|
||||
<div class="header-product-card-1">
|
||||
<a href="{$child.link}" target="{$child.blank==1?'_blank':'_self'}">
|
||||
<div class="header-product-img-1">
|
||||
<img src="{$child.image}" alt="">
|
||||
</div>
|
||||
<div class="header-product-title-1">{$child.name}</div>
|
||||
<div class="header-product-name-1">{$child.desc}</div>
|
||||
</a>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- 右侧功能按钮 -->
|
||||
<div class="header-nav-actions">
|
||||
<div class="header-search-wrapper">
|
||||
<span class="header-nav-btn">
|
||||
<img src="__IMAGES__/s1.png" alt="" style="width: 17px;height: 17px;">
|
||||
</span>
|
||||
<div class="header-search-dropdown" id="searchDropdown">
|
||||
<span class="header-search-dropdown-delete-icon">✕</span>
|
||||
<div class="header-search-input-wrapper">
|
||||
<input type="text" class="header-search-input" placeholder="{:lang_i18n('搜索产品、分类...')}">
|
||||
<button class="header-search-submit">{:lang_i18n('搜索')}</button>
|
||||
</div>
|
||||
<div class="header-search-history" id="searchHistory">
|
||||
<div class="header-history-title">
|
||||
<span>{:lang_i18n('最近搜索')}</span>
|
||||
<span class="header-clear-history" id="clearHistory">{:lang_i18n('清空')}</span>
|
||||
</div>
|
||||
<div class="header-history-list" id="historyList"></div>
|
||||
</div>
|
||||
<div class="header-hot-products">
|
||||
<div class="header-hot-title">{:lang_i18n('热销产品')}</div>
|
||||
<div class="header-hot-product-list">
|
||||
{if condition="!empty($header_hot_products)"}
|
||||
{volist name="header_hot_products" id="pro"}
|
||||
<div class="header-hot-product-item" data-keyword="keyword-{$pro.id}">
|
||||
<div class="header-hot-product-img">
|
||||
<a href="{:url('product/detail', ['id' => $pro.id])}">
|
||||
<img src="{:thumb($pro.cover_image)}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-hot-product-name">{$pro.name}</div>
|
||||
</div>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-lang-wrapper" >
|
||||
<span class="header-nav-btn">
|
||||
<img src="__IMAGES__/l1.png" alt="" style="width: 20px;height:20px">
|
||||
</span>
|
||||
<div class="header-lang-dropdown" id="langDropdown">
|
||||
<span class="header-lang-dropdown-delete-icon">✕</span>
|
||||
{volist name="header_languages" id="vo"}
|
||||
<a href="{$vo.lang_url}" class="header-lang-item" data-lang="zh-CN" target="_self">
|
||||
<img src="{$vo.lang_icon}" alt="">
|
||||
|
||||
{eq name=":cookie('think_lang')" value="zh-cn"}
|
||||
<span class="header-lang-code">{$vo.country_zh_name}</span>
|
||||
<span class="header-lang-name">{$vo.lang_name}</span>
|
||||
{else}
|
||||
<span class="header-lang-code">{$vo.country_en_name}</span>
|
||||
<span class="header-lang-name-en">{$vo.lang_en_name}</span>
|
||||
{/eq}
|
||||
</a>
|
||||
{/volist}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-buy-wrapper">
|
||||
<button class="header-buy-btn">
|
||||
<img src="__IMAGES__/g1.png" alt="" style="margin-right: 3px;">
|
||||
{:lang_i18n('购买')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 购买下拉框 -->
|
||||
<div class="header-buy-dropdown" id="buyDropdown">
|
||||
<div class="header-buy-dropdown-content">
|
||||
{if condition="!empty($header_mall_entrance)"}
|
||||
{volist name="header_mall_entrance" id="ma"}
|
||||
<a class="header-buy-product-card" target="_self" href="{$ma.link}">
|
||||
<div class="header-buy-product-img">
|
||||
<img class="header-default-img" src="{$ma.image}" alt="{$ma.name}">
|
||||
{if condition="!empty($ma.hover_image)"}
|
||||
<img class="header-hover-img" src="{$ma.hover_image}" alt="{$ma.name}">
|
||||
{/if}
|
||||
</div>
|
||||
<div class="header-buy-product-title">{$ma.name}</div>
|
||||
</a>
|
||||
{/volist}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100vw;height: 64px;"></div>
|
||||
<div id="mhk"></div>
|
||||
<script>
|
||||
|
||||
// 获取所有包含商品卡片的元素
|
||||
const productCards = document.querySelectorAll('.header-buy-product-card');
|
||||
|
||||
productCards.forEach(card => {
|
||||
// 获取卡片内的图片容器和两张图片
|
||||
const imgContainer = card.querySelector('.header-buy-product-img');
|
||||
const defaultImg = imgContainer?.querySelector('.header-default-img');
|
||||
const hoverImg = imgContainer?.querySelector('.header-hover-img');
|
||||
|
||||
// 检查悬浮图是否存在（因为HTML中用了if判断，所以可能有也可能没有这个元素）
|
||||
const hasHoverImg = hoverImg !== null;
|
||||
|
||||
// 如果没有悬浮图，不需要任何交互，直接返回
|
||||
if (!hasHoverImg) return;
|
||||
|
||||
// 初始状态确保普通图显示，悬浮图隐藏
|
||||
defaultImg.style.opacity = '1';
|
||||
hoverImg.style.opacity = '0';
|
||||
|
||||
// 鼠标移入事件：显示悬浮图，隐藏普通图
|
||||
card.addEventListener('mouseenter', () => {
|
||||
defaultImg.style.opacity = '0';
|
||||
hoverImg.style.opacity = '1';
|
||||
});
|
||||
|
||||
// 鼠标移出事件：恢复普通图，隐藏悬浮图
|
||||
card.addEventListener('mouseleave', () => {
|
||||
defaultImg.style.opacity = '1';
|
||||
hoverImg.style.opacity = '0';
|
||||
});
|
||||
});
|
||||
//产品列表在hover复位tabs选择
|
||||
const productNavContainer = document.querySelector('.header-nav-item:first-child');
|
||||
|
||||
if (productNavContainer) {
|
||||
productNavContainer.addEventListener('mouseleave', () => {
|
||||
// 延迟执行，确保下拉菜单已经隐藏
|
||||
setTimeout(() => {
|
||||
const tabs = document.querySelectorAll('.header-tab-item');
|
||||
const contents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
// 重置到第一个tab
|
||||
if (tabs.length > 0 && tabs[0]) {
|
||||
tabs.forEach(tab => tab.classList.remove('active'));
|
||||
contents.forEach(content => content.classList.remove('active'));
|
||||
|
||||
tabs[0].classList.add('active');
|
||||
const firstContentId = tabs[0].getAttribute('data-tab');
|
||||
const firstContent = document.getElementById(firstContentId);
|
||||
if (firstContent) firstContent.classList.add('active');
|
||||
}
|
||||
}, 350);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
const tabItems = document.querySelectorAll('.header-tab-item');
|
||||
const tabContents = document.querySelectorAll('.header-tab-content');
|
||||
|
||||
tabItems.forEach(tab =>
|
||||
{
|
||||
tab.addEventListener('click', () =>
|
||||
{
|
||||
tabItems.forEach(item => item.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
const tabId = tab.getAttribute('data-tab');
|
||||
tabContents.forEach(content =>
|
||||
{
|
||||
content.classList.remove('active');
|
||||
if (content.id === tabId) {
|
||||
content.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let searchHistory = JSON.parse(localStorage.getItem('searchHistory') || '[]');
|
||||
|
||||
function renderHistory ()
|
||||
{
|
||||
const historyList = document.getElementById('historyList');
|
||||
const historySection = document.getElementById('searchHistory');
|
||||
if (searchHistory.length === 0) {
|
||||
historySection.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
historySection.style.display = 'block';
|
||||
historyList.innerHTML = searchHistory.map((item, index) => `
|
||||
<div class="header-history-item" data-keyword="${item}">
|
||||
<span>${item}</span>
|
||||
<span class="header-delete-icon" data-index="${index}">✕</span>
|
||||
</div>
|
||||
`).join('');
|
||||
document.querySelectorAll('.header-history-item').forEach(item =>
|
||||
{
|
||||
const keyword = item.getAttribute('data-keyword');
|
||||
const deleteBtn = item.querySelector('.header-delete-icon');
|
||||
item.addEventListener('click', (e) =>
|
||||
{
|
||||
if (e.target === deleteBtn) return;
|
||||
performSearch(keyword);
|
||||
});
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
const index = parseInt(deleteBtn.getAttribute('data-index'));
|
||||
searchHistory.splice(index, 1);
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addToHistory (keyword)
|
||||
{
|
||||
if (!keyword.trim()) return;
|
||||
searchHistory = searchHistory.filter(item => item !== keyword);
|
||||
searchHistory.unshift(keyword);
|
||||
if (searchHistory.length > 10) searchHistory.pop();
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
}
|
||||
|
||||
const clearHistoryBtn = document.getElementById('clearHistory');
|
||||
if (clearHistoryBtn) {
|
||||
clearHistoryBtn.addEventListener('click', () =>
|
||||
{
|
||||
searchHistory = [];
|
||||
localStorage.setItem('searchHistory', JSON.stringify(searchHistory));
|
||||
renderHistory();
|
||||
});
|
||||
}
|
||||
|
||||
function performSearch (keyword)
|
||||
{
|
||||
if (keyword.trim()) {
|
||||
addToHistory(keyword);
|
||||
window.location.href = "{:url('product/search')}?keywords=" + encodeURIComponent(keyword);
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
if (searchInput) searchInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
const searchBtn = document.querySelector('.header-search-wrapper .header-nav-btn');
|
||||
const searchDropdown = document.getElementById('searchDropdown');
|
||||
const searchInput = document.querySelector('.header-search-input');
|
||||
const searchSubmit = document.querySelector('.header-search-submit');
|
||||
const langDropdown = document.getElementById('langDropdown');
|
||||
const buyDropdown = document.getElementById('buyDropdown');
|
||||
|
||||
const langCloseBtn = document.querySelector('.header-lang-dropdown-delete-icon');
|
||||
const searchCloseBtn = document.querySelector('.header-search-dropdown-delete-icon');
|
||||
|
||||
// 语言关闭按钮
|
||||
if (langCloseBtn && langCloseBtn) {
|
||||
langCloseBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
langDropdown.classList.remove('show');
|
||||
|
||||
});
|
||||
}
|
||||
//搜索关闭
|
||||
if (searchCloseBtn && searchCloseBtn) {
|
||||
searchCloseBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
|
||||
e.stopPropagation();
|
||||
searchDropdown.classList.remove('show');
|
||||
|
||||
});
|
||||
}
|
||||
// 鼠标移入导航项时，关闭购买下拉框
|
||||
const navItems = document.querySelectorAll('.header-nav-item');
|
||||
navItems.forEach(item =>
|
||||
{
|
||||
|
||||
item.addEventListener('mouseenter', () =>
|
||||
{
|
||||
|
||||
buyDropdown.classList.remove('show');
|
||||
langDropdown.classList.remove('show');
|
||||
searchDropdown.classList.remove('show');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
if (searchBtn && searchDropdown) {
|
||||
searchBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (langDropdown) langDropdown.classList.remove('show');
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
searchDropdown.classList.toggle('show');
|
||||
if (searchDropdown.classList.contains('show')) {
|
||||
renderHistory();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (searchSubmit) {
|
||||
searchSubmit.addEventListener('click', () =>
|
||||
{
|
||||
performSearch(searchInput.value);
|
||||
});
|
||||
}
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('keypress', (e) =>
|
||||
{
|
||||
if (e.key === 'Enter') {
|
||||
performSearch(searchInput.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const hotProducts = document.querySelectorAll('.header-hot-product-item');
|
||||
hotProducts.forEach(product =>
|
||||
{
|
||||
product.addEventListener('click', () =>
|
||||
{
|
||||
const keyword = product.getAttribute('data-keyword');
|
||||
if (keyword) performSearch(keyword);
|
||||
});
|
||||
});
|
||||
|
||||
const langBtn = document.querySelector('.header-lang-wrapper .header-nav-btn');
|
||||
if (langBtn && langDropdown) {
|
||||
langBtn.addEventListener('click', (e) =>
|
||||
{
|
||||
e.stopPropagation();
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
langDropdown.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
const buyWrapper = document.querySelector('.header-buy-wrapper');
|
||||
if (buyWrapper && buyDropdown) {
|
||||
buyWrapper.addEventListener('click', () =>
|
||||
{
|
||||
// buyDropdown.classList.add('show');
|
||||
buyDropdown.classList.toggle('show');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('click', (e) =>
|
||||
{
|
||||
if (!e.target.closest('.header-search-wrapper')) {
|
||||
if (searchDropdown) searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (!e.target.closest('.header-lang-wrapper')) {
|
||||
if (langDropdown) langDropdown.classList.remove('show');
|
||||
}
|
||||
if (!e.target.closest('.header-buy-wrapper')) {
|
||||
if (buyDropdown) buyDropdown.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
if (searchDropdown) searchDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
if (langDropdown) langDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
if (buyDropdown) buyDropdown.addEventListener('click', (e) => e.stopPropagation());
|
||||
|
||||
renderHistory();
|
||||
|
||||
|
||||
// ========== 蒙版层功能（支持所有弹窗，包括导航悬停下拉） ==========
|
||||
const mhk = document.getElementById('mhk');
|
||||
const body = document.body;
|
||||
|
||||
|
||||
|
||||
// 获取滚动条宽度（防止打开弹窗时页面抖动）
|
||||
function getScrollbarWidth() {
|
||||
const scrollDiv = document.createElement('div');
|
||||
scrollDiv.style.cssText = `
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
`;
|
||||
document.body.appendChild(scrollDiv);
|
||||
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
// 打开蒙版层的函数
|
||||
function openOverlay() {
|
||||
if (mhk && mhk.style.display !== 'block') {
|
||||
mhk.style.display = 'block';
|
||||
body.style.overflow = 'hidden';
|
||||
body.style.paddingRight = getScrollbarWidth() + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭蒙版层的函数
|
||||
function closeOverlay() {
|
||||
if (mhk && mhk.style.display === 'block') {
|
||||
// 检查是否还有其他弹窗打开（包括导航下拉菜单）
|
||||
const isBuyOpen = buyDropdown && buyDropdown.classList.contains('show');
|
||||
const isSearchOpen = searchDropdown && searchDropdown.classList.contains('show');
|
||||
const isLangOpen = langDropdown && langDropdown.classList.contains('show');
|
||||
|
||||
// 检查导航下拉菜单是否打开（通过检查是否有 active 或显示状态）
|
||||
const productDropdown = document.querySelector('.header-nav-item:first-child .header-dropdown');
|
||||
const isProductDropdownOpen = productDropdown && window.getComputedStyle(productDropdown).display !== 'none';
|
||||
|
||||
// 检查其他导航下拉菜单
|
||||
let isOtherNavOpen = false;
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const dropdown = item.querySelector('.header-dropdown');
|
||||
if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
|
||||
isOtherNavOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// 只有当所有弹窗和导航下拉菜单都关闭时，才关闭蒙版层
|
||||
if (!isBuyOpen && !isSearchOpen && !isLangOpen && !isProductDropdownOpen && !isOtherNavOpen) {
|
||||
mhk.style.display = 'none';
|
||||
body.style.overflow = '';
|
||||
body.style.paddingRight = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 强制关闭所有弹窗和蒙版
|
||||
function closeAllDropdownsAndOverlay() {
|
||||
let anyOpen = false;
|
||||
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
anyOpen = true;
|
||||
}
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
anyOpen = true;
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
anyOpen = true;
|
||||
}
|
||||
|
||||
// 关闭产品列表导航的下拉菜单（通过移除hover触发的显示）
|
||||
const productNavItem = document.querySelector('.header-nav-item:first-child');
|
||||
if (productNavItem) {
|
||||
const productDropdown = productNavItem.querySelector('.header-dropdown');
|
||||
if (productDropdown && window.getComputedStyle(productDropdown).display !== 'none') {
|
||||
productDropdown.style.display = '';
|
||||
anyOpen = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他导航的下拉菜单
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const dropdown = item.querySelector('.header-dropdown');
|
||||
if (dropdown && window.getComputedStyle(dropdown).display !== 'none') {
|
||||
dropdown.style.display = '';
|
||||
anyOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (anyOpen) {
|
||||
closeOverlay();
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 监听导航下拉菜单的显示/隐藏 ==========
|
||||
|
||||
// 1. 产品列表导航（第一个导航项）
|
||||
const productNavItem = document.querySelector('.header-nav-item:first-child');
|
||||
if (productNavItem) {
|
||||
const productDropdown = productNavItem.querySelector('.header-dropdown');
|
||||
|
||||
// 监听鼠标进入产品列表导航
|
||||
productNavItem.addEventListener('mouseenter', () => {
|
||||
// 当导航下拉菜单显示时，关闭其他点击弹窗
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
// 打开蒙版层
|
||||
openOverlay();
|
||||
});
|
||||
|
||||
// 监听鼠标离开产品列表导航（延迟关闭，给用户移动到下拉菜单的时间）
|
||||
productNavItem.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
// 检查鼠标是否在下拉菜单上
|
||||
if (productDropdown) {
|
||||
const isHoveringDropdown = productDropdown.matches(':hover');
|
||||
const isHoveringNav = productNavItem.matches(':hover');
|
||||
if (!isHoveringDropdown && !isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听下拉菜单的鼠标离开事件
|
||||
if (productDropdown) {
|
||||
productDropdown.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
const isHoveringNav = productNavItem.matches(':hover');
|
||||
if (!isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 其他导航项（有下拉菜单的）
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const hasDropdown = item.querySelector('.header-dropdown');
|
||||
if (hasDropdown) {
|
||||
const dropdown = hasDropdown;
|
||||
|
||||
// 监听鼠标进入导航项
|
||||
item.addEventListener('mouseenter', () => {
|
||||
// 关闭其他点击弹窗
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
// 打开蒙版层
|
||||
openOverlay();
|
||||
});
|
||||
|
||||
// 监听鼠标离开导航项
|
||||
item.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
if (dropdown) {
|
||||
const isHoveringDropdown = dropdown.matches(':hover');
|
||||
const isHoveringNav = item.matches(':hover');
|
||||
if (!isHoveringDropdown && !isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
} else {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 监听下拉菜单的鼠标离开
|
||||
if (dropdown) {
|
||||
dropdown.addEventListener('mouseleave', () => {
|
||||
setTimeout(() => {
|
||||
const isHoveringNav = item.matches(':hover');
|
||||
if (!isHoveringNav) {
|
||||
closeOverlay();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 重新绑定所有点击弹窗事件 ==========
|
||||
|
||||
// 1. 购买弹窗
|
||||
const buyWrapperNew = document.querySelector('.header-buy-wrapper');
|
||||
if (buyWrapperNew && buyDropdown) {
|
||||
const newBuyWrapper = buyWrapperNew.cloneNode(true);
|
||||
buyWrapperNew.parentNode.replaceChild(newBuyWrapper, buyWrapperNew);
|
||||
|
||||
newBuyWrapper.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = buyDropdown.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
buyDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
} else {
|
||||
// 关闭其他弹窗和导航下拉菜单
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
// 关闭导航下拉菜单
|
||||
closeAllNavDropdowns();
|
||||
|
||||
buyDropdown.classList.add('show');
|
||||
openOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 搜索弹窗
|
||||
const searchBtnNew = document.querySelector('.header-search-wrapper .header-nav-btn');
|
||||
if (searchBtnNew && searchDropdown) {
|
||||
const newSearchBtn = searchBtnNew.cloneNode(true);
|
||||
searchBtnNew.parentNode.replaceChild(newSearchBtn, searchBtnNew);
|
||||
|
||||
newSearchBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = searchDropdown.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
searchDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
} else {
|
||||
// 关闭其他弹窗和导航下拉菜单
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
}
|
||||
// 关闭导航下拉菜单
|
||||
closeAllNavDropdowns();
|
||||
|
||||
searchDropdown.classList.add('show');
|
||||
openOverlay();
|
||||
if (typeof renderHistory === 'function') {
|
||||
renderHistory();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 语言弹窗
|
||||
const langBtnNew = document.querySelector('.header-lang-wrapper .header-nav-btn');
|
||||
if (langBtnNew && langDropdown) {
|
||||
const newLangBtn = langBtnNew.cloneNode(true);
|
||||
langBtnNew.parentNode.replaceChild(newLangBtn, langBtnNew);
|
||||
|
||||
newLangBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const isOpen = langDropdown.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
langDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
} else {
|
||||
// 关闭其他弹窗和导航下拉菜单
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
}
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
}
|
||||
// 关闭导航下拉菜单
|
||||
closeAllNavDropdowns();
|
||||
|
||||
langDropdown.classList.add('show');
|
||||
openOverlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 辅助函数：关闭所有导航下拉菜单
|
||||
function closeAllNavDropdowns() {
|
||||
// 关闭产品列表导航下拉菜单
|
||||
const productNavItem = document.querySelector('.header-nav-item:first-child');
|
||||
if (productNavItem) {
|
||||
const productDropdown = productNavItem.querySelector('.header-dropdown');
|
||||
if (productDropdown) {
|
||||
productDropdown.style.display = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭其他导航下拉菜单
|
||||
const otherNavItems = document.querySelectorAll('.header-nav-item:not(:first-child)');
|
||||
otherNavItems.forEach(item => {
|
||||
const dropdown = item.querySelector('.header-dropdown');
|
||||
if (dropdown) {
|
||||
dropdown.style.display = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 关闭按钮事件重新绑定 ==========
|
||||
|
||||
// 语言关闭按钮
|
||||
const langCloseBtnNew = document.querySelector('.header-lang-dropdown-delete-icon');
|
||||
if (langCloseBtnNew && langDropdown) {
|
||||
const newLangCloseBtn = langCloseBtnNew.cloneNode(true);
|
||||
langCloseBtnNew.parentNode.replaceChild(newLangCloseBtn, langCloseBtnNew);
|
||||
|
||||
newLangCloseBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
langDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索关闭按钮
|
||||
const searchCloseBtnNew = document.querySelector('.header-search-dropdown-delete-icon');
|
||||
if (searchCloseBtnNew && searchDropdown) {
|
||||
const newSearchCloseBtn = searchCloseBtnNew.cloneNode(true);
|
||||
searchCloseBtnNew.parentNode.replaceChild(newSearchCloseBtn, searchCloseBtnNew);
|
||||
|
||||
newSearchCloseBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
searchDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 全局点击事件 ==========
|
||||
document.addEventListener('click', (e) => {
|
||||
// 检查是否点击在购买区域外
|
||||
if (!e.target.closest('.header-buy-wrapper') && !e.target.closest('#buyDropdown')) {
|
||||
if (buyDropdown && buyDropdown.classList.contains('show')) {
|
||||
buyDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否点击在搜索区域外
|
||||
if (!e.target.closest('.header-search-wrapper') && !e.target.closest('#searchDropdown')) {
|
||||
if (searchDropdown && searchDropdown.classList.contains('show')) {
|
||||
searchDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否点击在语言区域外
|
||||
if (!e.target.closest('.header-lang-wrapper') && !e.target.closest('#langDropdown')) {
|
||||
if (langDropdown && langDropdown.classList.contains('show')) {
|
||||
langDropdown.classList.remove('show');
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否点击在导航区域外（如果点击在导航外部，关闭导航下拉菜单）
|
||||
if (!e.target.closest('.header-nav-item')) {
|
||||
closeAllNavDropdowns();
|
||||
closeOverlay();
|
||||
}
|
||||
});
|
||||
|
||||
// ========== 蒙版层点击事件 ==========
|
||||
if (mhk) {
|
||||
mhk.addEventListener('click', () => {
|
||||
closeAllDropdownsAndOverlay();
|
||||
closeAllNavDropdowns();
|
||||
closeOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 监听弹窗状态变化 ==========
|
||||
function setupDropdownObserver(dropdown, name) {
|
||||
if (!dropdown) return;
|
||||
|
||||
const observer = new MutationObserver((mutations) => {
|
||||
mutations.forEach((mutation) => {
|
||||
if (mutation.attributeName === 'class') {
|
||||
if (!dropdown.classList.contains('show')) {
|
||||
closeOverlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
observer.observe(dropdown, { attributes: true });
|
||||
}
|
||||
|
||||
setupDropdownObserver(buyDropdown, 'buy');
|
||||
setupDropdownObserver(searchDropdown, 'search');
|
||||
setupDropdownObserver(langDropdown, 'lang');
|
||||
|
||||
// ========== 页面卸载时恢复滚动 ==========
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (body) {
|
||||
body.style.overflow = '';
|
||||
body.style.paddingRight = '';
|
||||
}
|
||||
});
|
||||
|
||||
// 确保蒙版层初始状态正确
|
||||
closeOverlay();
|
||||
</script>
|
||||
Reference in New Issue
Block a user