'移动端修复搜索结果点击不跳转的bug'

CLAUDE.md

@@ -98,14 +98,21 @@ const DOM = {
 使用 `marked.js` + `highlight.js`，配置在 `reader.js:15-29`
 
 #### 2. TOC 自动生成
-`reader.js:176-221` - 遍历渲染后的 HTML，提取所有 h1-h6 标题，使用 `IntersectionObserver` 实现滚动监听
+`reader.js:176-231` - 遍历渲染后的 HTML，提取所有 h1-h6 标题，使用 `IntersectionObserver` 实现滚动监听
 
 #### 3. 搜索功能
 - 后端：逐行扫描所有 `.md` 文件，返回匹配的行号和上下文片段
 - 前端：使用 `TreeWalker` API 精确定位到匹配的文本节点并滚动
 - 搜索历史保存在 `localStorage`，按分类隔离
 
-#### 4. 性能优化
+#### 4. 移动端侧边栏交互
+`reader.js:314-355` - 移动端侧边栏管理逻辑：
+- **互斥展开**：点击一侧目录按钮时，自动隐藏另一侧已展开的目录，确保同一时间最多只有一个侧边栏展开
+- **点击外部关闭**：点击文档内容区域或其他目录以外的地方时，所有展开的侧边栏自动隐藏
+- **响应式行为**：此功能仅在移动端和平板（≤1024px）上启用，桌面端不受影响
+- **事件处理**：使用 `e.stopPropagation()` 防止事件冒泡，使用 `element.contains()` 精确判断点击位置
+
+#### 5. 性能优化
 - DOM 缓存：减少 60%+ 的查询次数
 - 事件委托：减少 90%+ 的事件监听器
 - 搜索防抖：500ms，减少 40% 的 API 请求
@@ -142,6 +149,8 @@ cjydocs/
 2. 使用事件委托替代单独绑定事件
 3. 对高频操作使用防抖/节流
 4. 更新 DOM 时使用 `classList.toggle()` 简化条件判断
+5. 添加移动端交互时，注意检查窗口宽度（`window.innerWidth`）以区分设备类型
+6. 使用 `e.stopPropagation()` 防止事件冒泡，避免触发外部点击事件
 
 ### 修改文档结构
 1. 编辑 `docs/index.md`
@@ -164,6 +173,22 @@ if (!validatePath(docPath, docsDir)) {
 }
 ```
 
+## 响应式设计要点
+
+### 移动端适配 (≤768px)
+- 左右侧边栏默认折叠，通过底部悬浮按钮切换
+- 侧边栏以 `fixed` 定位覆盖在内容区上方
+- 使用 `transform: translateX()` 实现滑入滑出动画
+- 回到顶部按钮位置调整为 `bottom: 100px`，避免与侧边栏按钮冲突
+
+### 平板适配 (768px-1024px)
+- 左侧边栏默认展开，右侧边栏默认折叠
+- 右侧边栏以 `fixed` 定位，只在需要时显示
+
+### 桌面端 (>1024px)
+- 左右侧边栏始终展开
+- 三栏布局：文档导航 + 内容区 + TOC 目录
+
 ## 常见问题
 
 ### 文档显示为空或 404
@@ -178,6 +203,12 @@ if (!validatePath(docPath, docsDir)) {
 2. 文档内容是否包含匹配文本
 3. 浏览器控制台是否有 API 错误
 
+### 移动端侧边栏无法关闭
+检查：
+1. 点击事件是否正确绑定到 document
+2. `e.stopPropagation()` 是否正确阻止了按钮点击事件冒泡
+3. 窗口宽度判断逻辑是否正确（`window.innerWidth <= 1024`）
+
 ### 性能问题
 检查：
 1. 是否为每个元素单独绑定了事件（应使用事件委托）

public/js/reader.js

@@ -611,6 +611,16 @@ function createDocResultElement(doc, isCurrent) {
             searchContainer.classList.remove('active');
             searchResults.style.display = 'none';
 
+            // 在移动端和平板上关闭所有侧边栏，确保用户能看到跳转后的内容
+            if (window.innerWidth <= 1024) {
+                if (DOM.leftSidebar && !DOM.leftSidebar.classList.contains('collapsed')) {
+                    DOM.leftSidebar.classList.add('collapsed');
+                }
+                if (DOM.rightSidebar && !DOM.rightSidebar.classList.contains('collapsed')) {
+                    DOM.rightSidebar.classList.add('collapsed');
+                }
+            }
+
             if (isCurrent) {
                 // 当前文档，滚动到对应位置
                 scrollToSearchMatch(match.fullLine);