diff --git a/app/index/view/pc/public/header.html b/app/index/view/pc/public/header.html index 081c36b8..169ddc38 100644 --- a/app/index/view/pc/public/header.html +++ b/app/index/view/pc/public/header.html @@ -155,26 +155,53 @@ return history; } + // 封装一个函数用于处理鼠标悬停显示和隐藏内容 function handleHover($element, $content) { - $element.mouseenter(function () { - $content.stop(true, true).slideDown(60); - }).mouseleave(function () { - $content.stop(true, true).slideUp(60); - }); + // 同时支持鼠标悬停和点击事件 + $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(); + }); } - // 处理第一个导航项 - handleHover($('.navItem').eq(0), $('.navItem').eq(0).find('.navItemConten')); - // 鼠标移入navItem_cyleft里面的li标签添加类,移除其他li的类 + + // 处理产品列表的下拉菜单 + 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(); }); - // 处理第5 - 8个导航项 - for (let i = 4; i < 8; i++) { - handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1')); - } + + // 动态处理所有带有navItemConten1的导航项 + $('.navItem').each(function () { + var $this = $(this); + var $dropdown = $this.find('.navItemConten1'); + // 只给有下拉菜单的导航项绑定事件 + if ($dropdown.length) { + handleHover($this, $dropdown); + } + }); + // 点击搜索 $('#openModalBtn').click(function () { $('#scmodal').toggle(); @@ -182,8 +209,20 @@ $('.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) { @@ -198,9 +237,11 @@ window.location.href = "{:url('product/search')}" + '?keywords=' + keywords; } }); + // 点击选择国家 - $('#countrycheck').click(function () { + $('#countrycheck').click(function (e) { $('#top-country').toggle(); + e.stopPropagation(); }); $('.closecountrybt').click(function () { $('#top-country').hide(); diff --git a/public/static/index/pc/css/topic_nas_header.css b/public/static/index/pc/css/topic_nas_header.css index 2070ea52..ba5306db 100644 --- a/public/static/index/pc/css/topic_nas_header.css +++ b/public/static/index/pc/css/topic_nas_header.css @@ -54,7 +54,7 @@ } .narsPage-head .headcenter .logico { - width: 10rem; + /* width: 10rem; */ height: 2.875rem; /* width:100% */ } \ No newline at end of file