移动端侧边栏显示异常求助（Node.js+EJS+Tailwind）

针对你开发的类archive.org网站在移动端出现侧边栏跑到内容下方、无法通过Actions按钮正常切换显隐的问题，核心问题出在响应式布局的定位逻辑和移动端交互控制上，以下是具体修复步骤：

1. 调整DOM结构 #

先确认torrent.ejs中的DOM结构，建议将侧边栏与主内容分离，避免因布局自动换行导致侧边栏下移：

<!-- 推荐结构 -->
<button class="mobile-actions-btn">Actions</button>
<aside class="sidebar">
  <!-- 侧边栏内容 -->
</aside>
<main class="main-content">
  <!-- 主内容区域 -->
</main>

2. 编写响应式CSS规则 #

通过媒体查询区分桌面端与移动端布局，让移动端侧边栏脱离文档流固定定位，默认隐藏，点击按钮切换显隐：

/* 桌面端样式：侧边栏正常显示 */
.sidebar {
  width: 280px;
  float: left;
  margin-right: 20px;
}
.main-content {
  overflow: hidden;
}
.mobile-actions-btn {
  display: none; /* 桌面端隐藏按钮 */
}

/* 移动端媒体查询（可根据需求调整断点） */
@media (max-width: 768px) {
  .mobile-actions-btn {
    display: block; /* 移动端显示切换按钮 */
    padding: 10px 15px;
    margin-bottom: 15px;
  }
  .sidebar {
    position: fixed; /* 脱离文档流，避免随内容下移 */
    top: 0;
    left: -100%; /* 默认隐藏在屏幕左侧 */
    width: 85%;
    height: 100vh;
    background-color: #fff;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    transition: left 0.3s ease;
    z-index: 1000; /* 确保侧边栏在最上层 */
    padding: 20px;
  }
  /* 激活类：点击按钮后显示侧边栏 */
  .sidebar.show {
    left: 0;
  }
  .main-content {
    width: 100%;
  }
}

3. 绑定按钮交互事件 #

在torrent.ejs底部添加脚本，实现点击Actions按钮切换侧边栏显隐：

// DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const toggleBtn = document.querySelector('.mobile-actions-btn');
  const sidebar = document.querySelector('.sidebar');
  
  toggleBtn.addEventListener('click', function() {
    sidebar.classList.toggle('show');
  });
  
  // 可选：点击侧边栏外部关闭侧边栏
  document.addEventListener('click', function(e) {
    if (!sidebar.contains(e.target) && e.target !== toggleBtn) {
      sidebar.classList.remove('show');
    }
  });
});

4. 常见问题排查 #

• 检查是否有高优先级CSS规则（如!important）覆盖了移动端侧边栏样式，可通过浏览器开发者工具Elements面板查看样式优先级。
• 确认侧边栏z-index值足够高，避免被其他元素遮挡。
• 通过浏览器Console面板验证按钮点击事件是否正常触发。

内容的提问来源于stack exchange，提问作者HttpAnimations