94 lines
3.3 KiB
JavaScript
94 lines
3.3 KiB
JavaScript
// 获取按钮和侧边栏元素
|
|
const menuButton = document.querySelector('.toggle-menu');
|
|
const sidebar = document.getElementById('sidebar');
|
|
|
|
const menuButtons = document.querySelectorAll('.tag-btn');
|
|
|
|
|
|
// 侧边栏切换功能
|
|
menuButton.addEventListener('click', function(event) {
|
|
event.stopPropagation(); // 阻止事件冒泡，避免触发文档点击事件
|
|
toggleSidebar(); // 调用切换侧边栏函数
|
|
toggleRotation(); // 调用旋转按钮函数
|
|
});
|
|
|
|
menuButtons.forEach(button => {
|
|
button.addEventListener('click', function(event) {
|
|
event.stopPropagation(); // 阻止事件冒泡
|
|
toggleSidebar(); // 关闭侧边栏
|
|
toggleRotation(); // 旋转按钮
|
|
});
|
|
});
|
|
|
|
// 侧边栏元素和按钮
|
|
function toggleSidebar() {
|
|
if (window.innerWidth <= 768) { // 小屏幕显示菜单按钮
|
|
sidebar.classList.toggle('open'); // 切换侧边栏的显示/隐藏
|
|
if (sidebar.classList.contains('open')) {
|
|
document.body.classList.add('no-scroll'); // 禁用滚动
|
|
} else {
|
|
document.body.classList.remove('no-scroll'); // 恢复滚动
|
|
}
|
|
}
|
|
}
|
|
|
|
// 检查侧边栏的状态，更新按钮显示/隐藏
|
|
function updateMenuButtonVisibility() {
|
|
if (window.innerWidth <= 768) { // 小屏幕显示菜单按钮
|
|
menuButton.style.display = 'block';
|
|
} else { // 大屏幕上不显示菜单按钮，侧边栏始终可见
|
|
menuButton.style.display = 'none';
|
|
if (sidebar.classList.contains('open')) {
|
|
sidebar.classList.add('open');
|
|
}
|
|
}
|
|
}
|
|
|
|
// 监听窗口大小变化，确保菜单按钮的显示和隐藏正确
|
|
window.addEventListener('resize', function() {
|
|
updateMenuButtonVisibility();
|
|
});
|
|
|
|
// 初始化时检查菜单按钮的显示状态
|
|
updateMenuButtonVisibility();
|
|
|
|
// 监听点击事件，点击侧边栏外部区域关闭侧边栏
|
|
document.addEventListener('click', function(event) {
|
|
const isClickInsideSidebar = sidebar.contains(event.target);
|
|
const isClickInsideButton = menuButton.contains(event.target);
|
|
|
|
// 如果点击的地方不在侧边栏和按钮内部，并且侧边栏是打开的，则关闭侧边栏
|
|
if (!isClickInsideSidebar && !isClickInsideButton && sidebar.classList.contains('open')) {
|
|
sidebar.classList.remove('open'); // 关闭侧边栏
|
|
menuButton.classList.remove('rotated'); // 恢复按钮横向
|
|
document.body.classList.remove('no-scroll'); // 允许滚动
|
|
}
|
|
});
|
|
|
|
// 阻止点击侧边栏时关闭侧边栏
|
|
sidebar.addEventListener('click', function(event) {
|
|
event.stopPropagation(); // 阻止事件冒泡，防止点击侧边栏时关闭
|
|
});
|
|
|
|
// 动画效果
|
|
function animateToolCards() {
|
|
const toolCards = document.querySelectorAll('.tool-card');
|
|
toolCards.forEach((card, index) => {
|
|
card.style.transitionDelay = `${index * 100}ms`; // 按顺序延迟动画
|
|
card.classList.add('animated'); // 添加动画类
|
|
});
|
|
}
|
|
;
|
|
|
|
// 禁用双指缩放
|
|
document.addEventListener('touchstart', function(e) {
|
|
if (e.touches.length > 1) { // 如果检测到多于一个手指
|
|
e.preventDefault(); // 阻止默认缩放行为
|
|
}
|
|
});
|
|
|
|
document.addEventListener('touchmove', function(e) {
|
|
if (e.touches.length > 1) { // 如果检测到多于一个手指
|
|
e.preventDefault(); // 阻止默认缩放行为
|
|
}
|
|
}); |