feat: 为TODO列表添加折叠已完成任务功能
- 添加折叠/展开已完成任务的按钮,显示已完成数量 - 实现流畅的折叠展开动画效果(高度、透明度、位移) - 优化删除和完成任务的动画,增加缩放效果 - 同时支持桌面端和移动端 - 折叠按钮在没有已完成任务时自动隐藏 - 使用 CSS transition 实现平滑的进入退出动画
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user