/** * @description 初始化组件 */ function initComponentHeaderMsunhealth() { // DOM var pageContent = $(".page-container"); // 页面Content var pcHeader = $(".component--header-msunhealth--pc"); // PC Header var moHeader = $(".component--header-msunhealth--mo-header"); // 移动端Header var btnSearch = $(".component--header-msunhealth--pc .fun-btn-search, .component--header-msunhealth--mo-header .fun-btn-search"); // 搜索按钮 var moBtnMenu = moHeader.find(".fun-btn-menu"); // 移动端菜单按钮 var moContent = $(".component--header-msunhealth--mo-content"); // 移动端Content var moLinks = moContent.find(".link"); // 移动端一级菜单 // 点击移动端菜单按钮 moBtnMenu.on("click", function () { // 隐藏移动端Header moHeader.addClass("hide"); // 显示移动端Content moContent.addClass("show"); // 缩放页面内容 pageContent.addClass("onhide"); }); // 点击缩放的页面Content pageContent.on("click", function () { if ($(this).hasClass("onhide")) { // 显示移动端Header moHeader.removeClass("hide"); // 隐藏移动端Content moContent.removeClass("show"); // 取消页面缩放 pageContent.addClass("before-no-hide"); var timer = setTimeout(function () { pageContent.removeClass("onhide before-no-hide"); }, 500); } }); // 展开移动端二级菜单 moLinks.on("click", function () { // 关闭其它菜单 $(this).parent(".nav-group").siblings(".nav-group").find(".children-container").height(0); // 展开当前菜单 var childrenContainer = $(this).parent().find(".children-container"); // 子菜单最外层容器 var childrenWrapper = childrenContainer.children(".children-wrapper"); // 子菜单内容容器 var childrenWrapperHeight = childrenWrapper.outerHeight(); // 子菜单内容容器高度 childrenContainer.height(childrenWrapperHeight); }); // 显示搜索层 btnSearch.on("click", window.$hi.components.headerSearchMsunhealth.show); // 页面默认上填充,预留出Header的空间高度 initBodyPaddingTop(); $(window).resize(initBodyPaddingTop); /** * @description 页面默认上填充,预留出Header的空间高度 */ function initBodyPaddingTop() { $("body").css("padding-top", function () { if ($(window).width() > 768) { return pcHeader.outerHeight() - 2 + "px"; } else { return moHeader.outerHeight() + "px"; } }); $("body").attr("data-padding-top", function () { if ($(window).width() > 768) { return pcHeader.outerHeight() - 2 + "px"; } else { return moHeader.outerHeight() + "px"; } }); } // v2 var leftGroups = $(".header-pc-children-group-alpaca"); leftGroups.each(function(index, domEle) { // Left Items var leftItems = $(domEle).find(".left-item"); // Right Contents var rightContents = $(domEle).find(".right-content"); // 添加鼠标事件 leftItems.on("mouseover", function () { // 激活对应菜单和内容 activationItemAndContent($(this).index()); }); // 默认激活第一项 activationItemAndContent(0); /** * !激活对应菜单和内容 * @param {*} index 菜单下标 * @return {*} */ function activationItemAndContent(index) { leftItems.eq(index).addClass("over").siblings().removeClass("over"); rightContents.eq(index).addClass("show").siblings().removeClass("show"); } }) } $(function () { // 调用组件 initComponentHeaderMsunhealth(); });