本教程詳細(xì)闡述如何通過JavaScript和CSS協(xié)同工作，解決響應(yīng)式漢堡菜單在移動(dòng)端子列表無(wú)法展開的問題，并確保桌面端導(dǎo)航項(xiàng)的懸停效果。核心方法是利用JavaScript為菜單項(xiàng)動(dòng)態(tài)添加/移除一個(gè)“active”類，并通過CSS控制該類存在時(shí)的子菜單顯示狀態(tài)，同時(shí)輔以媒體查詢實(shí)現(xiàn)不同設(shè)備下的交互邏輯。

核心問題分析

在構(gòu)建響應(yīng)式網(wǎng)站時(shí)，導(dǎo)航菜單通常會(huì)根據(jù)屏幕尺寸變化。在桌面端，我們可能需要通過鼠標(biāo)懸停來(lái)顯示子菜單；而在移動(dòng)端，由于沒有鼠標(biāo)懸停的概念，通常需要點(diǎn)擊漢堡菜單圖標(biāo)來(lái)展開主菜單，再點(diǎn)擊主菜單項(xiàng)來(lái)展開其子列表。常見的挑戰(zhàn)是，子列表在移動(dòng)端點(diǎn)擊后無(wú)法正確顯示，或桌面端的懸停效果缺失。

JavaScript 交互邏輯實(shí)現(xiàn)

為了在移動(dòng)端實(shí)現(xiàn)點(diǎn)擊展開子列表的功能，我們可以利用JavaScript監(jiān)聽主菜單項(xiàng)的點(diǎn)擊事件，并在點(diǎn)擊時(shí)動(dòng)態(tài)地切換一個(gè)CSS類（例如active）。這個(gè)active類將作為CSS選擇器的一部分，用于控制子菜單的顯示與隱藏。

以下是實(shí)現(xiàn)此功能的JavaScript代碼：

// 獲取所有具有 'nav-link' 類的 ul 元素，這些通常代表主導(dǎo)航項(xiàng)
let navLink = document.querySelectorAll('ul.nav-link');

// 遍歷每個(gè)導(dǎo)航項(xiàng)，為其添加點(diǎn)擊事件監(jiān)聽器
navLink.forEach((eachLink) => {
    eachLink.addEventListener('click', (event) => {
        // 檢查當(dāng)前導(dǎo)航項(xiàng)是否包含 'active' 類
        if (!eachLink.classList.contains('active')) {
            // 如果不包含，則添加 'active' 類
            eachLink.classList.add('active');
        } else {
            // 如果已包含，則移除 'active' 類（實(shí)現(xiàn)切換效果）
            eachLink.classList.remove('active');
        }
        // 注意：如果子菜單的點(diǎn)擊事件可能冒泡到父級(jí)，
        // 導(dǎo)致父級(jí)菜單收起，可能需要 event.stopPropagation();
        // 但對(duì)于簡(jiǎn)單的點(diǎn)擊展開/收起，通常不需要。
    });
});

代碼解析：

1. document.querySelectorAll('ul.nav-link'): 選中頁(yè)面中所有帶有nav-link類的
   元素。在典型的導(dǎo)航結(jié)構(gòu)中，這些ul元素可能代表一級(jí)菜單項(xiàng)，其內(nèi)部包含
   • 和子菜單
     。
   • forEach((eachLink) => { ... }): 遍歷所有找到的導(dǎo)航項(xiàng)。
   • eachLink.addEventListener('click', (event) => { ... }): 為每個(gè)導(dǎo)航項(xiàng)添加一個(gè)點(diǎn)擊事件監(jiān)聽器。
   • eachLink.classList.contains('active'): 檢查當(dāng)前被點(diǎn)擊的導(dǎo)航項(xiàng)是否已經(jīng)有active類。
   • eachLink.classList.add('active') / eachLink.classList.remove('active'): 根據(jù)active類的存在與否，動(dòng)態(tài)地添加或移除它，從而實(shí)現(xiàn)點(diǎn)擊切換狀態(tài)的效果。

CSS 樣式控制

JavaScript負(fù)責(zé)切換active類，而CSS則根據(jù)這個(gè)類的存在與否來(lái)控制子菜單的顯示。通常，子菜單在默認(rèn)情況下是隱藏的（例如display: none;），只有當(dāng)其父級(jí)導(dǎo)航項(xiàng)被激活時(shí)才顯示。

將以下CSS規(guī)則添加到您的樣式文件中：

/* 默認(rèn)情況下隱藏子菜單 */
.dropdown-menu {
    display: none;
}

/* 當(dāng)父級(jí) ul.nav-link 具有 'active' 類時(shí)，顯示其內(nèi)部的 .dropdown-menu */
ul.nav-link.active .dropdown-menu {
    display: block; /* 或者 flex, grid 等，取決于您的布局需求 */
}

/* 針對(duì)桌面端懸停效果 */
/* 假設(shè)在桌面視圖下，導(dǎo)航項(xiàng)的父級(jí) ul.nav-link 或 li 可以被懸停 */
@media (min-width: 768px) { /* 示例斷點(diǎn)，請(qǐng)根據(jù)您的設(shè)計(jì)調(diào)整 */
    ul.nav-link:hover .dropdown-menu {
        display: block; /* 桌面端懸停時(shí)顯示子菜單 */
    }
    /* 
     * 考慮移除桌面端點(diǎn)擊效果，以避免與懸停沖突。
     * 這可以通過在JavaScript中添加媒體查詢判斷，或在CSS中覆蓋實(shí)現(xiàn)。
     * 例如：在桌面端，可以重置 ul.nav-link.active .dropdown-menu 的 display 屬性，
     * 或者確保 hover 規(guī)則優(yōu)先級(jí)更高。
     */
}

CSS解析：

1. .dropdown-menu { display: none; }: 這是關(guān)鍵的第一步，確保所有子菜單在默認(rèn)情況下是隱藏的。
2. ul.nav-link.active .dropdown-menu { display: block; }: 當(dāng)ul.nav-link元素被JavaScript添加了active類時(shí)，其內(nèi)部的.dropdown-menu子元素就會(huì)被設(shè)置為display: block;（或其他適合的顯示類型，如flex），從而使其可見。
3. @media (min-width: 768px) { ... }: 使用媒體查詢來(lái)針對(duì)桌面屏幕（例如寬度大于768px）應(yīng)用特定的樣式。
4. ul.nav-link:hover .dropdown-menu { display: block; }: 在桌面視圖下，當(dāng)鼠標(biāo)懸停在ul.nav-link上時(shí)，其子菜單.dropdown-menu會(huì)顯示出來(lái)。

桌面端懸停效果處理

為了同時(shí)滿足移動(dòng)端點(diǎn)擊展開和桌面端懸停展開的需求，我們需要確保媒體查詢的正確應(yīng)用和CSS規(guī)則的優(yōu)先級(jí)。上述CSS代碼已經(jīng)包含了桌面端的懸停規(guī)則。

需要注意的是：

• 沖突解決： 如果在桌面端，您不希望點(diǎn)擊也觸發(fā)子菜單顯示（只希望懸停），那么可能需要調(diào)整JavaScript邏輯，使其只在小屏幕下生效，或者在CSS中確保懸停規(guī)則的優(yōu)先級(jí)高于active類規(guī)則。通常，CSS的優(yōu)先級(jí)規(guī)則會(huì)使得更具體的選擇器（如ul.nav-link:hover）覆蓋一般選擇器（如ul.nav-link.active），但這取決于您的具體HTML結(jié)構(gòu)和CSS規(guī)則順序。
• 最佳實(shí)踐： 推薦在JavaScript中加入媒體查詢判斷，只在小屏幕下添加點(diǎn)擊事件監(jiān)聽器，或者在事件處理函數(shù)內(nèi)部判斷當(dāng)前屏幕尺寸，從而避免桌面端不必要的點(diǎn)擊行為。

注意事項(xiàng)與優(yōu)化建議

1. 可訪問性（Accessibility）：

   • 為漢堡菜單按鈕添加aria-expanded屬性，并在菜單展開/收起時(shí)動(dòng)態(tài)更新其值。
   • 使用aria-haspopup和aria-controls屬性來(lái)增強(qiáng)語(yǔ)義化。
   • 確保鍵盤用戶可以通過Tab鍵導(dǎo)航和Enter/Space鍵激活菜單項(xiàng)。

2. 動(dòng)畫效果：

   • 使用CSS transition屬性可以為菜單的展開/收起添加平滑的動(dòng)畫效果，提升用戶體驗(yàn)。例如，從height: 0; overflow: hidden;過渡到height: auto;。
   • 避免直接使用display: none;到display: block;的過渡，因?yàn)閐isplay屬性無(wú)法直接動(dòng)畫?？梢钥紤]使用max-height或opacity結(jié)合transform。

3. 性能：

   • 對(duì)于大型導(dǎo)航菜單，考慮使用事件委托（Event Delegation），將事件監(jiān)聽器添加到父元素上，而不是每個(gè)單獨(dú)的菜單項(xiàng)，以減少內(nèi)存占用和提高性能。

4. JavaScript 優(yōu)化：

   • 上述JavaScript代碼可以簡(jiǎn)化為使用classList.toggle('active')，它能自動(dòng)判斷并添加或移除類，使代碼更簡(jiǎn)潔。

   let navLink = document.querySelectorAll('ul.nav-link');
   navLink.forEach((eachLink) => {
       eachLink.addEventListener('click', (event) => {
           eachLink.classList.toggle('active'); // 簡(jiǎn)化版
           // event.stopPropagation(); // 如果需要阻止事件冒泡
       });
   });

5. 結(jié)構(gòu)清晰： 確保您的HTML結(jié)構(gòu)清晰且語(yǔ)義化，例如使用

總結(jié)

通過結(jié)合JavaScript動(dòng)態(tài)類切換和CSS媒體查詢，我們可以有效地實(shí)現(xiàn)響應(yīng)式導(dǎo)航菜單在不同設(shè)備上的交互需求。JavaScript負(fù)責(zé)處理用戶交互邏輯（如點(diǎn)擊），而CSS則負(fù)責(zé)根據(jù)這些交互狀態(tài)來(lái)控制元素的視覺呈現(xiàn)。這種分離關(guān)注點(diǎn)的方法使得代碼更易于管理、擴(kuò)展和調(diào)試，是現(xiàn)代前端開發(fā)中的常見實(shí)踐。

以上是響應(yīng)式導(dǎo)航菜單：JavaScript與CSS實(shí)現(xiàn)漢堡菜單子列表與桌面懸停效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！