Expense Tracker仪表盘移动端All Months' Expenses展开与布局问题求助

开发者阿泽

2026-7-14

问题修复方案

1. 解决移动端默认展开所有月份的问题

检查CSS初始样式

首先确认移动端下月份详情容器的初始状态为折叠，避免媒体查询错误覆盖默认样式：

/* 全局默认折叠详情 */
.expenses-details {
  display: none;
}

/* 移动端媒体查询中确保样式一致 */
@media (max-width: 768px) {
  .expenses-details {
    display: none; /* 此处不要设置为block */
  }
}

优化JavaScript判断逻辑

原代码依赖element.style.display判断状态，但该属性仅读取行内样式，若初始样式由CSS定义会返回空字符串，导致逻辑错误。改为读取实际生效的计算样式：

function handleMonthExpandClick(monthDiv) {
  const expensesDetails = monthDiv.nextElementSibling;
  const currentDisplay = window.getComputedStyle(expensesDetails).display;
  expensesDetails.style.display = currentDisplay === "none" ? "block" : "none";
}

2. 解决移动端月份横向排列的问题

通过CSS媒体查询调整布局，将移动端的横向布局改为垂直排列：

/* 桌面端示例布局（根据你的实际代码调整） */
.all-months-container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

/* 移动端切换为垂直布局 */
@media (max-width: 768px) {
  .all-months-container {
    flex-direction: column;
  }
  /* 确保每个月份容器占满宽度，提升可读性 */
  .month-div {
    width: 100%;
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
  }
}