javascript嵌套目錄是許多網站都會使用的一種導航方式。它通常是一個側邊欄或下拉菜單，并且可以根據用戶所在的頁面和當前選擇的導航選項來自動展開和收起菜單。下面我們來看一些關于javascript嵌套目錄的例子。 舉一個簡單的例子來說，我們可以通過以下的代碼來實現一個簡單的嵌套目錄：

<div class="sidebar">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
<ul>
<li>
<a href="#">Company</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</li>
<li>
<a href="#">Products</a>
<ul>
<li>
<a href="#">Widgets</a>
</li>
<li>
<a href="#">Gizmos</a>
</li>
<li>
<a href="#">Thingamabobs</a>
</li>
</ul>
</li>
</ul>
</div>

在這個例子中，我們使用了一個簡單的HTML結構來創建一個基本的嵌套目錄。我們使用了一個無序列表來顯示導航選項，并在一個選項下創建了另一個無序列表來顯示子選項。這種結構可以非常容易地擴展到包含更多的選項和子選項。 接下來，我們可以使用一些javascript代碼來使得菜單自動展開和收起。下面就是一個例子：

var menuItems = document.querySelectorAll('.sidebar ul li a');
for (var i = 0; i< menuItems.length; i++) {
menuItems[i].addEventListener('click', function () {
var subMenu = this.nextElementSibling;
if (subMenu) {
event.preventDefault();
subMenu.classList.toggle('visible');
}
});
}

這段代碼會遍歷所有的菜單選項，并在每一個選項上添加一個點擊事件。當用戶點擊一個選項時，代碼會檢測它是否有一個子菜單，并且如果有的話，就會顯示或隱藏它。代碼指定了一個名為“visible”的CSS類，當菜單需要顯示時會將此類添加到子菜單上，需要隱藏時會將其移除。 這只是一個簡單的例子，但是我們可以使用類似的思路來實現更復雜的嵌套目錄。例如，我們可以使用ajax來動態加載菜單選項，并使用cookies或localStorage來保存用戶的選擇。無論怎樣，javascript嵌套目錄可以幫助使得網站導航更加像一個應用程序，而不僅僅是靜態的鏈接列表。