HTML 實現 QQ 郵箱側邊欄通訊錄下拉效果：F12 大法好

最快上手路徑

1. 打開 QQ 郵箱網頁版（mail.qq.com）。
2. 按 F12 開啟開發者工具 → **Elements/元素面板**。
3. 用選擇器（Ctrl+Shift+C）點擊右側通訊錄下拉區域。
4. 觀察 DOM 結構、CSS 類名、JS 事件綁定。
5. 將相關 HTML/CSS/JS 複製到本地項目，逐步精簡、重命名類名、接入自身數據接口。

核心實現模式（通用下拉面板）

<!-- HTML -->
<div class="sidebar">
  <div class="panel-header" id="contactToggle">通訊錄 <i class="arrow"></i></div>
  <div class="panel-body" id="contactList" style="display:none">
    <ul><li>聯繫人 1</li><li>聯繫人 2</li>...</ul>
  </div>
</div>

<!-- CSS -->
.panel-header { cursor: pointer; padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.panel-body { max-height: 300px; overflow-y: auto; background: white; }
.arrow { transition: transform .2s; }
.arrow.open { transform: rotate(180deg); }

<!-- JS (原生) -->
const toggle = document.getElementById('contactToggle');
const body = document.getElementById('contactList');
const arrow = toggle.querySelector('.arrow');
toggle.addEventListener('click', () => {
  const open = body.style.display !== 'none';
  body.style.display = open ? 'none' : 'block';
  arrow.classList.toggle('open', !open);
});

進階：虛擬滾動/搜索/分組

• 聯繫人超過百條時，用 **虛擬列表** 只渲染可視區（如 react-window、vue-virtual-scroller）。
• 頂部加 <input type="search" placeholder="搜索聯繫人">，輸入過濾 data-name 屬性。
• 按拼音首字母分組，側邊字母導航跳轉。

避坑提示

• QQ 郵箱可能用 **iframe 跨域加載** 通訊錄，直接複製 CSS/JS 可能因選擇器衝突失效，**務必隔離命名空間**（BEM 或 CSS Modules）。
• 側邊欄寬度固定時，內容過長需 overflow:auto 且 **父容器有確定高度**。
• 移動端需處理觸摸事件、防止點擊穿透。

總結

**不要從零寫 UI 組件**。F12 觀摩成熟產品（QQ 郵箱、Gmail、Outlook）、複製核心結構、接入自己數據、重構樣式隔離，是最高效、Bug 最少的路徑。