lottery-docs/_config/js/dropdown.js
liushuang 4e2a7d7498 feat(coverpage): 添加 Mac 平台下载下拉菜单
- 在封面页添加下拉菜单组件,支持 Mac Intel 芯片和 Apple 芯片两种下载选项
- 实现下拉菜单的 JavaScript 交互功能,包括展开收起和点击事件处理
- 添加下拉菜单的 CSS 样式,包含悬停效果和响应式布局
- 在 index.html 中引入新的 dropdown.js 脚本文件
- 实现移动端适配,确保下拉菜单在不同屏幕尺寸下的正常显示
2025-12-28 18:40:24 +08:00

88 lines
2.7 KiB
JavaScript

// 下拉框交互功能
(function() {
'use strict';
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) {
let clickHandler = null;
// 使用事件委托的方式初始化下拉框
function initDropdowns() {
// 如果已经初始化过,先移除旧的事件监听器
if (clickHandler) {
document.removeEventListener('click', clickHandler, true);
}
// 使用事件委托处理下拉框点击
clickHandler = function(e) {
// 检查是否点击了下拉按钮或其子元素
const toggle = e.target.closest('.dropdown-toggle');
if (toggle) {
e.preventDefault();
e.stopPropagation();
const dropdown = toggle.closest('.dropdown');
if (!dropdown) return;
// 关闭其他打开的下拉框
const allDropdowns = document.querySelectorAll('.dropdown');
allDropdowns.forEach(function(otherDropdown) {
if (otherDropdown !== dropdown) {
otherDropdown.classList.remove('active');
}
});
// 切换当前下拉框
dropdown.classList.toggle('active');
return;
}
// 检查是否点击了下拉菜单项或其子元素
const menuItem = e.target.closest('.dropdown-menu a');
if (menuItem) {
const dropdown = menuItem.closest('.dropdown');
if (dropdown) {
// 关闭下拉框(但允许链接正常跳转)
setTimeout(function() {
dropdown.classList.remove('active');
}, 100);
}
return;
}
// 点击页面其他地方时关闭所有下拉框
if (!e.target.closest('.dropdown')) {
const allDropdowns = document.querySelectorAll('.dropdown');
allDropdowns.forEach(function(dropdown) {
dropdown.classList.remove('active');
});
}
};
document.addEventListener('click', clickHandler, true);
}
// 在 ready 时初始化
hook.ready(function() {
// 延迟初始化,确保 coverpage 内容已渲染
setTimeout(function() {
const dropdowns = document.querySelectorAll('.dropdown');
if (dropdowns.length > 0) {
initDropdowns();
}
}, 500);
});
// 监听 docsify 的内容更新(用于动态加载的内容)
hook.doneEach(function() {
// 延迟初始化,确保内容已渲染
setTimeout(function() {
const dropdowns = document.querySelectorAll('.dropdown');
if (dropdowns.length > 0) {
initDropdowns();
}
}, 300);
});
});
})();