構(gòu)建動(dòng)態(tài) Web 應(yīng)用程序時(shí)，用戶界面 (UI) 需要提供直觀的導(dǎo)航體驗(yàn)。無(wú)論是具有多個(gè)產(chǎn)品類別的電子商務(wù)網(wǎng)站還是內(nèi)容豐富的管理儀表板，擁有活動(dòng)狀態(tài)和可擴(kuò)展菜單都可以增強(qiáng)可用性。在這篇博文中，我們將逐步創(chuàng)建一個(gè) JavaScript 腳本，該腳本動(dòng)態(tài)突出顯示導(dǎo)航中的當(dāng)前頁(yè)面，并根據(jù)用戶的路徑展開(kāi)相關(guān)部分。

問(wèn)題

當(dāng)用戶瀏覽多層菜單時(shí)，我們希望：

1. 當(dāng)前頁(yè)面鏈接上的活動(dòng)狀態(tài)。
2. 可擴(kuò)展部分，如果用戶位于嵌套在菜單中的頁(yè)面上，則會(huì)自動(dòng)打開(kāi)。

讓我們看一個(gè)示例 HTML 結(jié)構(gòu)以及如何添加 JavaScript 以使我們的菜單變得智能。

菜單結(jié)構(gòu)示例

這是一個(gè)典型的嵌套菜單結(jié)構(gòu)。我們將為菜單中的每個(gè)項(xiàng)目使用 menu-item，為鏈接使用 menu-link，為可折疊子菜單使用 menu-sub。

<!-- Categories -->
<li>



<p>In this structure:</p>

<ul>
<li>Each main menu link (menu-toggle) opens a submenu when clicked.</li>
<li>The actual pages are in the submenu links (menu-link).</li>
</ul>

<h3>
  
  
  The JavaScript Solution
</h3>

<p>We’ll use JavaScript to:</p>

<ol>
<li>Identify the current page.</li>
<li>Apply an active class to the link that matches the current URL.</li>
<li>Add an open class to the parent menu if the link is inside a collapsed submenu.</li>
</ol>

<p>Here’s the JavaScript code:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    window.onload = function () {
        const currentPath = window.location.pathname; // Get the current path
        const links = document.querySelectorAll('.menu-link'); // Select all menu links

        links.forEach(function (link) {
            // Check if the link's href matches the current page's path
            if (link.getAttribute('href') === currentPath) {
                // Add 'active' class to the parent 'li' element of the link
                const menuItem = link.closest('.menu-item');
                if (menuItem) {
                    menuItem.classList.add('active');

                    // Check if the link is within a 'menu-sub', expand the parent menu
                    const parentMenu = menuItem.closest('.menu-sub');
                    if (parentMenu) {
                        // Add 'open' class to the parent 'menu-item' of the submenu
                        const parentMenuItem = parentMenu.closest('.menu-item');
                        if (parentMenuItem) {
                            parentMenuItem.classList.add('open');
                        }
                    }
                }
            }
        });
    };
</script>

分解代碼

1. 獲取當(dāng)前路徑：

   const currentPath = window.location.pathname;

這會(huì)獲取當(dāng)前頁(yè)面的路徑（例如，/inventory-issues），我們將用它來(lái)與菜單中每個(gè)鏈接的 href 進(jìn)行比較。

1. 選擇菜單鏈接：

   const links = document.querySelectorAll('.menu-link');

我們選擇具有菜單鏈接類的所有元素，假設(shè)這些元素包含指向網(wǎng)站各個(gè)部分的鏈接。

1. 匹配當(dāng)前頁(yè)面：

   if (link.getAttribute('href') === currentPath) {

對(duì)于每個(gè)鏈接，我們檢查其 href 是否與 currentPath 匹配。如果是，則該鏈接適用于當(dāng)前頁(yè)面。

1. 設(shè)置活動(dòng)狀態(tài)：

   menuItem.classList.add('active');

我們向最近的菜單項(xiàng)添加一個(gè)活動(dòng)類，允許我們?cè)O(shè)置活動(dòng)頁(yè)面鏈接的樣式。

1. 展開(kāi)父菜單：

   const parentMenuItem = parentMenu.closest('.menu-item');
   parentMenuItem.classList.add('open');

如果活動(dòng)鏈接位于子菜單 (menu-sub) 內(nèi)，這部分代碼將查找包含該子菜單的父菜單項(xiàng)并添加開(kāi)放類，將其展開(kāi)。

為活動(dòng)和開(kāi)放狀態(tài)添加 CSS

您需要為 CSS 中的活動(dòng)類和開(kāi)放類定義樣式：

<!-- Categories -->
<li>



<p>In this structure:</p>

<ul>
<li>Each main menu link (menu-toggle) opens a submenu when clicked.</li>
<li>The actual pages are in the submenu links (menu-link).</li>
</ul>

<h3>
  
  
  The JavaScript Solution
</h3>

<p>We’ll use JavaScript to:</p>

<ol>
<li>Identify the current page.</li>
<li>Apply an active class to the link that matches the current URL.</li>
<li>Add an open class to the parent menu if the link is inside a collapsed submenu.</li>
</ol>

<p>Here’s the JavaScript code:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    window.onload = function () {
        const currentPath = window.location.pathname; // Get the current path
        const links = document.querySelectorAll('.menu-link'); // Select all menu links

        links.forEach(function (link) {
            // Check if the link's href matches the current page's path
            if (link.getAttribute('href') === currentPath) {
                // Add 'active' class to the parent 'li' element of the link
                const menuItem = link.closest('.menu-item');
                if (menuItem) {
                    menuItem.classList.add('active');

                    // Check if the link is within a 'menu-sub', expand the parent menu
                    const parentMenu = menuItem.closest('.menu-sub');
                    if (parentMenu) {
                        // Add 'open' class to the parent 'menu-item' of the submenu
                        const parentMenuItem = parentMenu.closest('.menu-item');
                        if (parentMenuItem) {
                            parentMenuItem.classList.add('open');
                        }
                    }
                }
            }
        });
    };
</script>

這種方法的好處

• 自動(dòng)活動(dòng)狀態(tài)：無(wú)需在每個(gè)頁(yè)面上對(duì)活動(dòng)鏈接進(jìn)行硬編碼。該腳本動(dòng)態(tài)更新活動(dòng)鏈接。
• 可擴(kuò)展菜單：用戶只能看到與當(dāng)前頁(yè)面相關(guān)的部分，減少手動(dòng)打開(kāi)菜單的需要。
• 可重用：該腳本足夠通用，可以與各種嵌套菜單結(jié)構(gòu)一起使用，使其適應(yīng)多種類型的網(wǎng)站。

？來(lái)自埃迪古萊

以上是為活動(dòng)狀態(tài)和可擴(kuò)展菜單創(chuàng)建動(dòng)態(tài)導(dǎo)航腳本的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！