feat: 为TODO列表添加折叠已完成任务功能

- 添加折叠/展开已完成任务的按钮,显示已完成数量
- 实现流畅的折叠展开动画效果(高度、透明度、位移)
- 优化删除和完成任务的动画,增加缩放效果
- 同时支持桌面端和移动端
- 折叠按钮在没有已完成任务时自动隐藏
- 使用 CSS transition 实现平滑的进入退出动画
This commit is contained in:
2026-01-23 13:04:43 +08:00
parent 7d3dd6e2a6
commit 9f8b560d20
3 changed files with 201 additions and 1 deletions

View File

@@ -3198,11 +3198,41 @@ $(document).on("click" , "#blog_categories .tag" , function(){
// ========== 移动端TODO交互 ==========
function updateMobileTodoCount() {
var count = $("#mobile-todo-list .mobile-todo-item:not(.todo-completed)").length;
var completedCount = $("#mobile-todo-list .mobile-todo-item.todo-completed").length;
$("#mobile_todo_count").text(count);
// 同步更新桌面端计数
$(".todo-count").text(count);
// 更新折叠按钮
var collapseBtn = $("#mobile-todo-collapse-btn");
if (collapseBtn.length) {
collapseBtn.find(".mobile-todo-completed-count").text(completedCount);
if (completedCount > 0) {
collapseBtn.show();
} else {
collapseBtn.hide();
}
}
}
// 移动端折叠/展开已完成任务
$(document).on("click", "#mobile-todo-collapse-btn", function(e) {
e.stopPropagation();
var btn = $(this);
var completedItems = $("#mobile-todo-list .mobile-todo-item.todo-completed");
var isCollapsed = btn.hasClass("collapsed");
if (isCollapsed) {
// 展开
btn.removeClass("collapsed");
completedItems.removeClass("collapsed");
} else {
// 折叠
btn.addClass("collapsed");
completedItems.addClass("collapsed");
}
});
// 添加TODO
$(document).on("click", "#mobile-todo-add-btn", function() {
addMobileTodo();