前端這幾年做多了跟下拉菜單打交道的次數(shù)多得數(shù)不過來。原生 html 語言下拉菜單select用起來最省事但只能在 option 里玩樣式一深究就卡住后來接手維護(hù)一套基于 Foundation 框架的項(xiàng)目倒是把它的下拉菜單組件認(rèn)認(rèn)真真摸透了。Foundation 的下拉菜單并不是一個(gè)簡(jiǎn)單控件它包含兩種經(jīng)常被混為一談的形態(tài)導(dǎo)航里的 dropdown menu和彈層式的 dropdown pane。這篇就把它們的結(jié)構(gòu)差異、交互原理、完整實(shí)現(xiàn)和排查經(jīng)驗(yàn)一次性講清楚給正在用 Foundation 做后臺(tái)、做內(nèi)容站、做官網(wǎng)的同學(xué)一個(gè)可以照著抄的參考。1. Foundation 下拉菜單整體設(shè)計(jì)與思路拆解1.1 原生下拉與框架組件的差距在哪選下拉菜單方案時(shí)大家第一反應(yīng)往往是先試原生 select。它確實(shí)簡(jiǎn)單表單提交也零成本但業(yè)務(wù)稍微復(fù)雜一點(diǎn)就不行了option 里不能放自定義 HTML撐不起頭像、描述文字、圖標(biāo)這些富內(nèi)容樣式受系統(tǒng)渲染影響Windows 和 macOS 長(zhǎng)得完全不一樣統(tǒng)一設(shè)計(jì)成本很高。那自己用 CSS 寫一個(gè) hover 下拉呢最開始的幾版 demo 確實(shí)好看但會(huì)碰到三個(gè)繞不過去的點(diǎn)一是鍵盤用戶沒法操作Tab 根本進(jìn)不了子菜單二是移動(dòng)端 hover 是偽狀態(tài)點(diǎn)擊一下可能直接誤跳鏈接三是多個(gè)下拉同時(shí)展開時(shí)狀態(tài)管理全靠自己寫 class項(xiàng)目一大人很容易亂。選擇 Foundation 自帶的下拉組件核心原因是它把交互狀態(tài)、定位計(jì)算、鍵盤支持和移動(dòng)端行為都內(nèi)置好了。我們?cè)跇I(yè)務(wù)里真正要寫的只有結(jié)構(gòu)標(biāo)記和 Sass 變量不用維護(hù)一套自己發(fā)明的狀態(tài)邏輯。這也是框架組件存在的意義讓高頻基礎(chǔ)組件的行為是標(biāo)準(zhǔn)化的而不是每個(gè)項(xiàng)目重新發(fā)明一次。1.2 兩種下拉形態(tài)到底怎么區(qū)分這是剛開始最容易混的一點(diǎn)。Foundation 文檔里經(jīng)常出現(xiàn)兩個(gè)名字dropdown menu 和 dropdown pane但它們?cè)诮Y(jié)構(gòu)、觸發(fā)方式和應(yīng)用場(chǎng)景上完全不是一回事。dropdown menu 用于導(dǎo)航菜單的嵌套展開結(jié)構(gòu)上是 ul 套 ul和 HTML 的嵌套列表天然契合。鼠標(biāo)懸?；蚓劢垢讣?jí)菜單時(shí)子菜單貼著父項(xiàng)邊緣滑出來常用于頂部導(dǎo)航、多級(jí)菜單、側(cè)邊欄分組這類場(chǎng)景。它追求的是“原位展開”不遮擋太多頁面內(nèi)容符合導(dǎo)航的瀏覽習(xí)慣。dropdown pane 則是一個(gè)通用的浮層容器本質(zhì)是一個(gè)獨(dú)立的 div可以放在頁面任意位置關(guān)聯(lián)到某個(gè)觸發(fā)器。按鈕點(diǎn)擊、懸?；騼烧呓M合都可以控制它的顯隱。它適合承載工具欄操作面板、用戶中心菜單、篩選器、大尺寸內(nèi)容卡片這類相對(duì)復(fù)雜的彈層彈層內(nèi)可以繼續(xù)放按鈕、表格、柵格布局自由度非常高。對(duì)比維度dropdown menudropdown pane基礎(chǔ)結(jié)構(gòu)嵌套列表 ul.menu獨(dú)立容器 div.dropdown-pane典型場(chǎng)景多級(jí)導(dǎo)航、樹形菜單用戶面板、篩選器、富內(nèi)容彈層觸發(fā)方式hover/focusclick 默認(rèn)可配 hover定位邏輯跟隨父級(jí)菜單項(xiàng)展開相對(duì)觸發(fā)元素計(jì)算位置擴(kuò)展能力基本只放鏈接列表可內(nèi)置 grid、表單、按鈕等判斷用哪種只要問一個(gè)問題這個(gè)下拉要展示的是“一組導(dǎo)航鏈接”還是“一個(gè)內(nèi)容面板”鏈接多、層級(jí)深用 dropdown menu面板重、內(nèi)容雜用 dropdown pane。1.3 數(shù)據(jù)屬性驅(qū)動(dòng)與漸進(jìn)增強(qiáng)的思路Foundation 的交互組件設(shè)計(jì)遵循一個(gè)習(xí)慣HTML 負(fù)責(zé)聲明行為JS 負(fù)責(zé)增強(qiáng)體驗(yàn)。下拉菜單的配置不是塞在 JS 里而是寫在>ul classdropdown menu>// jQuery 風(fēng)格 $(#main-nav).foundation(dropdownMenu, { hoverDelay: 150 }); // ES6 風(fēng)格 new Foundation.DropdownMenu($(#main-nav), { hoverDelay: 150 });常用配置項(xiàng)包括 hover是否懸停展開默認(rèn)開啟、hoverDelay懸停多久后展開避免鼠標(biāo)劃過時(shí)菜單亂跳、clickOpen是否允許點(diǎn)擊展開、closingTime關(guān)閉動(dòng)畫時(shí)長(zhǎng)。另外還有一個(gè)容易忽略的>button classbutton typebutton>$dropdown-bg: #fff !default; $dropdown-border: 1px solid $medium-gray !default; $dropdown-padding: 1rem !default; $dropdown-margin-top: 4px !default; $dropdown-pane-width: 300px !default; $dropdown-arrow-size: 6px !default;這些變量在引入組件之前覆蓋即可import foundation; $dropdown-bg: #f8f9fa; $dropdown-border: 1px solid #dee2e6; $dropdown-pane-width: 320px; $dropdown-arrow-size: 8px; include foundation-dropdown; include foundation-dropdown-menu;這里有個(gè)經(jīng)驗(yàn)不要指望所有視覺都通過變量覆蓋完。比如 pane 的圓角、陰影、內(nèi)部列表分割線變量表里沒有或者覆蓋結(jié)果不穩(wěn)定遇到這種情況直接在業(yè)務(wù) class 上寫自定義樣式比硬改變量更靠譜。比如下面這樣追加樣式就非常可控.user-pane { border-radius: 8px; box-shadow: 0 12px 24px rgba(0,0,0,0.15); .menu a { padding: 0.6rem 1rem; } }3. 實(shí)操過程與核心環(huán)節(jié)實(shí)現(xiàn)3.1 用戶中心頭像下拉的完整實(shí)現(xiàn)先做一個(gè)最常見的場(chǎng)景頂部導(dǎo)航右側(cè)的頭像點(diǎn)擊后彈出用戶中心菜單包含個(gè)人資料、我的訂單、偏好設(shè)置和退出登錄。我選擇用 dropdown pane 而不是 dropdown menu因?yàn)檫@里需要更自由的布局而且用戶頭像按鈕和菜單在視覺上是分離的浮層關(guān)系。結(jié)構(gòu)如下div classtop-bar-right button classbutton clear typebutton>.user-pane { padding: 0; min-width: 200px; .menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; color: #333; :hover { background: #f5f5f5; color: #1779ba; } } .logout { color: #cc4b37; } hr { margin: 0.25rem 0; border-top: 1px solid #e6e6e6; } } .avatar { width: 36px; height: 36px; border-radius: 50%; }這個(gè)案例合起來不到一百行但已經(jīng)覆蓋了拉取按鈕、浮層容器、內(nèi)部菜單、視覺反饋、收尾分隔線這些常規(guī)需求。放到真實(shí)項(xiàng)目里只需要再把頭像圖片和鏈接替換成真實(shí)數(shù)據(jù)即可。3.2 多級(jí)產(chǎn)品導(dǎo)航的嵌套踩坑記錄接下來做一個(gè)帶二級(jí)甚至三級(jí)菜單的產(chǎn)品導(dǎo)航。這是 dropdown menu 的本職場(chǎng)景結(jié)構(gòu)如下ul classdropdown menu>li span父級(jí)菜單/span ul classmenu.../ul /li初始化腳本$(#product-nav).foundation(dropdownMenu, { hoverDelay: 80, closingTime: 200 });時(shí)機(jī)上 hoverDelay 給到 80 到 150 之間比較平衡太快了鼠標(biāo)從菜單間劃過容易誤彈太慢了用戶覺得遲鈍closingTime 控制關(guān)閉動(dòng)畫的過渡時(shí)長(zhǎng)給 150~250 之間觀感比較自然。3.3 大尺寸多列下拉面板的改造方案官網(wǎng)首頁經(jīng)常要做一個(gè)“解決方案”大下拉里面放兩列卡片每列有小標(biāo)題和多個(gè)鏈接。如果用 dropdown menu 做列排列很吃力用 dropdown pane Foundation 自帶柵格會(huì)舒服很多。結(jié)構(gòu)長(zhǎng)這樣button classbutton>.solution-pane { width: 480px !important; max-width: calc(100vw - 40px); padding: 1rem; }寬度用!important是因?yàn)開dropdown.scss里的$dropdown-pane-width也會(huì)生成一個(gè) width直接覆蓋變量當(dāng)然更干凈但遇到第三方主題不好改變量時(shí)組件類上局部覆蓋是更快的兜底方案。max-width 的寫法是為了防小屏幕在手機(jī)尺寸下不至于撐出橫向滾動(dòng)條。3.4 關(guān)閉行為配置與微交互補(bǔ)充做透下拉菜單關(guān)閉行為的配置逃不掉。dropdown pane 有兩個(gè)容易混淆的屬性>.dropdown-pane { transition: opacity 0.25s ease, visibility 0.25s ease; }menu 形態(tài)的子菜單則不同它是通過 display 切換顯示做平滑動(dòng)畫要麻煩一些需要給子菜單加 transform 和 opacity 的初始與展開狀態(tài)類。這塊投入產(chǎn)出比不高我一般不做過度動(dòng)畫保證切換響應(yīng)快、不閃爍就夠了。4. 常見問題與排查技巧實(shí)錄4.1 點(diǎn)擊外部不關(guān)閉可能是配置和事件沖突這是下拉面板最常見的一個(gè)問題?，F(xiàn)象是打開 pane 后點(diǎn)擊頁面其他位置面板紋絲不動(dòng)。排查順序如下。先看 pane 屬性里有沒有>// 先銷毀已綁定的實(shí)例再初始化新容器 $(#user-nav).foundation(destroy); $(#user-nav).foundation(dropdownMenu, { hover: true });如果頁面里有多個(gè)動(dòng)態(tài)區(qū)塊建議封裝一個(gè)統(tǒng)一方法所有新增下拉都走同一個(gè)初始化入口方便排查。還有一點(diǎn)動(dòng)態(tài)生成的 pane 綁定>console.log($(#demo-pane).length, $(#demo-toggle).length);兩個(gè)元素都存在且 id 匹配再往下排查插件配置。4.5 快速排查表現(xiàn)象最常見的可能原因解決辦法點(diǎn)擊按鈕不出彈層id 不匹配 / 未初始化檢查>