javascript怎麼實現左邊次級導航

隨著 Web 前端技術的快速發展，JavaScript 已經被廣泛應用於各種 Web 應用程式。在網頁設計中，導覽列是很重要的元素之一，是使用者進入網站的主要入口，也是網站整體架構的重要組成部分。本文將介紹如何實作 JavaScript 左邊次級導覽列。

導覽列是網站中最基本的組成部分之一，主要用於導航整個網站中的各個頁面。但在頁面中常會出現導覽列過長的情況，這時我們通常會採用次級導覽列來解決這個問題。本文將介紹如何使用 JavaScript 實作一個左邊次級導覽欄，並簡單說明其實作原理。

在實現左邊次級導覽列之前，需要先掌握幾個必要的概念和技術。其中包括 HTML、CSS 和 JavaScript。

1. HTML

HTML 是用來描述網頁內容的標記語言，透過HTML 標籤來定義和描述頁面上的各種元素，包括文字、圖片、連結等。在實作左邊次級導覽列時，需要使用 HTML 來定義導覽列的結構。

2. CSS

CSS 是用來描述網頁樣式的標記語言，透過CSS 樣式表來定義和描述頁面上的各種元素的外觀和佈局。在實作左邊次級導覽列時，需要使用 CSS 來定義導覽列的樣式和佈局。

3. JavaScript

JavaScript 是一種用於開發 Web 應用程式的程式語言，其語法和語義都和 C 語言類似。在實作左邊次級導覽列時，需要使用 JavaScript 來實現導覽列的互動和動態效果。

現在開始我們的實作步驟。

步驟1：HTML 結構

首先，我們需要使用 HTML 來定義導覽列的結構，包括主導覽列和次級導覽列。主導覽列是整個網站的入口，而次級導覽列是主導覽列的子選單，用於顯示主導覽列的某些內容。下面是一個簡單的 HTML 結構，用來實作左邊次級導覽列：

<div class="sidebar">
   <ul class="main-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a>
         <ul class="sub-nav">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
         </ul>
      </li>
      <li><a href="#">Services</a>
         <ul class="sub-nav">
            <li><a href="#">Service 1</a></li>
            <li><a href="#">Service 2</a></li>
            <li><a href="#">Service 3</a></li>
         </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</div>

在上面的程式碼中，我們使用了一個 div 和一個 ul 元素來表示導覽列。其中，ul 元素被分成兩個部分：主導航列和次級導航列。主導覽列使用 li 和 a 標籤表示，而次級導覽列使用嵌套的 ul, li 和 a 標籤表示。

步驟2：CSS 樣式

接下來，我們需要使用 CSS 樣式來定義導覽列的樣式和佈局。樣式表位於