97 lines
3.9 KiB
HTML
97 lines
3.9 KiB
HTML
<script>
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
/**
|
||
* 为指定的侧边栏菜单应用点击阻止逻辑。
|
||
* @param {string} selector - 目标 <ul> 元素的 CSS 选择器。
|
||
* @param {string} menuType - 菜单类型（例如 'Desktop' 或 'Mobile'），用于日志记录。
|
||
*/
|
||
function applyClickPrevention(selector, menuType) {
|
||
// 使用提供的选择器查找菜单UL元素
|
||
// 注意：CSS选择器中的冒号需要用反斜杠转义
|
||
const menuUl = document.querySelector(selector);
|
||
|
||
if (menuUl) {
|
||
// 选择该UL下所有第一级的<a>标签
|
||
const firstLevelAnchors = menuUl.querySelectorAll(':scope > li > a');
|
||
let preventedCount = 0;
|
||
|
||
firstLevelAnchors.forEach(anchor => {
|
||
const parentLi = anchor.closest('li');
|
||
// 检查这个li内部是否包含一个子菜单（另一个ul）
|
||
const hasSubmenu = parentLi && parentLi.querySelector('ul');
|
||
|
||
// **仅当存在子菜单时**，才阻止链接的默认导航行为
|
||
if (hasSubmenu) {
|
||
anchor.addEventListener('click', function(event) {
|
||
// 阻止链接的默认导航行为
|
||
event.preventDefault();
|
||
console.log(`[${menuType}] Default navigation prevented for:`, anchor.href);
|
||
|
||
// 切换父级li的 'open' 类以展开/折叠子菜单
|
||
if (parentLi) {
|
||
parentLi.classList.toggle('open');
|
||
console.log(`[${menuType}] ${parentLi.classList.contains('open') ? 'Opened' : 'Closed'} submenu for:`, anchor.textContent.trim());
|
||
}
|
||
});
|
||
preventedCount++;
|
||
}
|
||
});
|
||
|
||
console.log(`[${menuType}] Added click prevention to ${preventedCount} first-level <a> tags with submenus in '${selector}'.`);
|
||
} else {
|
||
console.warn(`[${menuType}] The specified UL ('${selector}') was not found.`);
|
||
}
|
||
}
|
||
|
||
// --- 主逻辑 ---
|
||
|
||
// 1. 定义桌面端菜单的选择器
|
||
const desktopMenuSelector = 'ul.hx-flex.hx-flex-col.hx-gap-1.max-md\\:hx-hidden';
|
||
|
||
// 2. 定义移动端菜单的选择器
|
||
// 通常，移动端菜单的类与桌面端相反（例如，在md及以上屏幕隐藏）
|
||
// !!! 请根据你的HTML结构检查并确认这个选择器是正确的 !!!
|
||
const mobileMenuSelector = 'ul.hx-flex.hx-flex-col.hx-gap-1.md\\:hx-hidden';
|
||
|
||
// 3. 分别为桌面和移动端菜单应用逻辑
|
||
applyClickPrevention(desktopMenuSelector, 'Desktop Menu');
|
||
applyClickPrevention(mobileMenuSelector, 'Mobile Menu');
|
||
|
||
});
|
||
|
||
/**
|
||
* @name localizeTimeTags
|
||
* @description 检测并转换页面上所有<time>标签的时间到用户本地时区。
|
||
* 它会读取<time>标签的 `datetime` 属性（应为UTC时间），
|
||
* 并将其内容更新为用户本地时区的时间字符串。
|
||
*/
|
||
function localizeTimeTags() {
|
||
// 1. 获取所有 <time> 元素
|
||
const timeElements = document.querySelectorAll('time');
|
||
|
||
// 2. 遍历每个元素
|
||
timeElements.forEach(timeEl => {
|
||
// 3. 获取 UTC 时间字符串
|
||
const utcDateTime = timeEl.getAttribute('datetime');
|
||
if (!utcDateTime) {
|
||
return; // 跳过没有 datetime 属性的标签
|
||
}
|
||
|
||
// 4. 创建 Date 对象
|
||
const dateObj = new Date(utcDateTime);
|
||
if (isNaN(dateObj.getTime())) {
|
||
return; // 跳过无效的日期
|
||
}
|
||
|
||
// 5. 转换为本地化字符串并更新内容
|
||
// toLocaleString() 会自动处理时区偏移
|
||
timeEl.textContent = dateObj.toLocaleString();
|
||
});
|
||
}
|
||
|
||
// 确保在HTML文档加载完毕后运行此脚本
|
||
document.addEventListener('DOMContentLoaded', localizeTimeTags);
|
||
|
||
</script> |