document.addEventListener("DOMContentLoaded", function () { const configs = [ { trigger: ".social-qr-trigger-1", popup: ".social-qr-popup-1" }, { trigger: ".social-qr-trigger-2", popup: ".social-qr-popup-2" }, { trigger: ".social-qr-trigger-3", popup: ".social-qr-popup-3" } ]; const pairs = []; let closeTimer = null; function closeAll(exceptPopup = null) { pairs.forEach(function (pair) { if (pair.popup !== exceptPopup) { pair.popup.classList.remove("is-visible"); pair.clickable.setAttribute("aria-expanded", "false"); } }); } configs.forEach(function (config, index) { const trigger = document.querySelector(config.trigger); const popup = document.querySelector(config.popup); if (!trigger || !popup) { return; } /* * 找实际图标，不再使用整个 Icon Box 作为定位基准。 */ const anchor = trigger.querySelector(".elementor-icon") || trigger.querySelector(".elementor-icon-box-icon") || trigger.querySelector(".elementskit-info-box-icon") || trigger.querySelector(".elementskit-box-header") || trigger.querySelector("img") || trigger; anchor.classList.add("social-qr-anchor"); /* * 把二维码移动到实际图标内部。 * absolute 定位不会改变现有网格布局。 */ anchor.appendChild(popup); const clickable = trigger.querySelector("a") || trigger.querySelector("button") || trigger; const popupId = "social-qr-popup-" + (index + 1); popup.id = popupId; popup.classList.add("social-qr-popup"); popup.setAttribute("aria-hidden", "true"); clickable.setAttribute("role", "button"); clickable.setAttribute("aria-controls", popupId); clickable.setAttribute("aria-expanded", "false"); const pair = { trigger, anchor, popup, clickable }; pairs.push(pair); function openPopup() { clearTimeout(closeTimer); closeAll(popup); popup.classList.add("is-visible"); popup.setAttribute("aria-hidden", "false"); clickable.setAttribute("aria-expanded", "true"); } function closePopup() { popup.classList.remove("is-visible"); popup.setAttribute("aria-hidden", "true"); clickable.setAttribute("aria-expanded", "false"); } function closePopupSoon() { clearTimeout(closeTimer); closeTimer = setTimeout(function () { if ( !trigger.matches(":hover") && !popup.matches(":hover") ) { closePopup(); } }, 140); } /* 点击显示或关闭，并阻止 # 跳转 */ clickable.addEventListener("click", function (event) { event.preventDefault(); event.stopPropagation(); const willOpen = !popup.classList.contains("is-visible"); closeAll(); if (willOpen) { openPopup(); } }); /* 电脑端悬停 */ trigger.addEventListener("mouseenter", function () { if (window.matchMedia("(min-width: 768px)").matches) { openPopup(); } }); trigger.addEventListener("mouseleave", function () { if (window.matchMedia("(min-width: 768px)").matches) { closePopupSoon(); } }); popup.addEventListener("mouseenter", function () { clearTimeout(closeTimer); }); popup.addEventListener("mouseleave", function () { if (window.matchMedia("(min-width: 768px)").matches) { closePopupSoon(); } }); popup.addEventListener("click", function (event) { event.stopPropagation(); }); }); document.addEventListener("click", function () { closeAll(); }); document.addEventListener("keydown", function (event) { if (event.key === "Escape") { closeAll(); } }); });