fix:pc导航修改
This commit is contained in:
@@ -155,26 +155,53 @@
|
|||||||
|
|
||||||
return history;
|
return history;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
// 封装一个函数用于处理鼠标悬停显示和隐藏内容
|
||||||
function handleHover($element, $content) {
|
function handleHover($element, $content) {
|
||||||
$element.mouseenter(function () {
|
// 同时支持鼠标悬停和点击事件
|
||||||
|
$element
|
||||||
|
.mouseenter(function () {
|
||||||
$content.stop(true, true).slideDown(60);
|
$content.stop(true, true).slideDown(60);
|
||||||
}).mouseleave(function () {
|
})
|
||||||
|
.mouseleave(function () {
|
||||||
$content.stop(true, true).slideUp(60);
|
$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 () {
|
$('.navItem_cyleft li').mouseenter(function () {
|
||||||
$(this).addClass('it_active').siblings().removeClass('it_active');
|
$(this).addClass('it_active').siblings().removeClass('it_active');
|
||||||
$('.navItem_cyright').hide();
|
$('.navItem_cyright').hide();
|
||||||
$('.navItem_cyright').eq($(this).index()).show();
|
$('.navItem_cyright').eq($(this).index()).show();
|
||||||
});
|
});
|
||||||
// 处理第5 - 8个导航项
|
|
||||||
for (let i = 4; i < 8; i++) {
|
// 动态处理所有带有navItemConten1的导航项
|
||||||
handleHover($('.navItem').eq(i), $('.navItem').eq(i).find('.navItemConten1'));
|
$('.navItem').each(function () {
|
||||||
|
var $this = $(this);
|
||||||
|
var $dropdown = $this.find('.navItemConten1');
|
||||||
|
// 只给有下拉菜单的导航项绑定事件
|
||||||
|
if ($dropdown.length) {
|
||||||
|
handleHover($this, $dropdown);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// 点击搜索
|
// 点击搜索
|
||||||
$('#openModalBtn').click(function () {
|
$('#openModalBtn').click(function () {
|
||||||
$('#scmodal').toggle();
|
$('#scmodal').toggle();
|
||||||
@@ -182,8 +209,20 @@
|
|||||||
$('.close-btn').click(function () {
|
$('.close-btn').click(function () {
|
||||||
$('#scmodal').hide();
|
$('#scmodal').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 点击空白处关闭下拉菜单
|
||||||
|
$(document).click(function () {
|
||||||
|
$('.navItemConten, .navItemConten1, #top-country').slideUp(60);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 防止下拉菜单内部点击触发空白处关闭事件
|
||||||
|
$('.navItemConten, .navItemConten1, #top-country').click(function (e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
// 搜索历史记录回显
|
// 搜索历史记录回显
|
||||||
history();
|
history();
|
||||||
|
|
||||||
// 执行搜索
|
// 执行搜索
|
||||||
$('#serrchinput').keydown(function (event) {
|
$('#serrchinput').keydown(function (event) {
|
||||||
if (event.originalEvent.keyCode == 13) {
|
if (event.originalEvent.keyCode == 13) {
|
||||||
@@ -198,9 +237,11 @@
|
|||||||
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
window.location.href = "{:url('product/search')}" + '?keywords=' + keywords;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 点击选择国家
|
// 点击选择国家
|
||||||
$('#countrycheck').click(function () {
|
$('#countrycheck').click(function (e) {
|
||||||
$('#top-country').toggle();
|
$('#top-country').toggle();
|
||||||
|
e.stopPropagation();
|
||||||
});
|
});
|
||||||
$('.closecountrybt').click(function () {
|
$('.closecountrybt').click(function () {
|
||||||
$('#top-country').hide();
|
$('#top-country').hide();
|
||||||
|
|||||||
@@ -54,7 +54,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.narsPage-head .headcenter .logico {
|
.narsPage-head .headcenter .logico {
|
||||||
width: 10rem;
|
/* width: 10rem; */
|
||||||
height: 2.875rem;
|
height: 2.875rem;
|
||||||
/* width:100% */
|
/* width:100% */
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user