近年來，隨著互聯(lián)網(wǎng)技術的快速發(fā)展，網(wǎng)頁設計越來越受到人們的關注。其中，樹形菜單作為網(wǎng)站的重要功能之一，被廣泛應用于各種網(wǎng)站設計。在這里，我們介紹一種基于HTML和jQuery的樹形菜單代碼，希望對各位網(wǎng)站設計師有所幫助。 首先，讓我們來看一下這個樹形菜單的HTML代碼：

<div class="tree">
<ul>
<li>
<span class="caret"></span> Parent
<ul class="nested">
<li>Child 1</li>
<li>Child 2</li>
<li>
<span class="caret"></span> Child 3
<ul class="nested">
<li>Grandchild 1</li>
<li>Grandchild 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

該代碼由一個`div`容器和一個`ul`列表構成，`li`元素表示樹形結構中的節(jié)點，`span`元素表示可折疊的箭頭圖標。 為了實現(xiàn)節(jié)點的展開和折疊，我們需要使用jQuery庫。下面是樹形菜單的jQuery代碼：

$(document).ready(function(){
$(".caret").click(function(){
$(this).toggleClass("active");
$(this).siblings(".nested").toggleClass("active");
});
});

該代碼首先檢測文檔是否準備就緒，然后選取所有class為`caret`的元素，為其綁定`click`事件。`toggleClass()`方法用于在元素的class列表中添加或刪除指定的class。當用戶點擊箭頭圖標時，代碼會將其相鄰的class為`nested`的元素的class列表中的`active` class添加或刪除，從而實現(xiàn)節(jié)點的展開和折疊。 在使用時，我們只需要將上述HTML和jQuery代碼復制到自己的網(wǎng)頁中即可。通過修改HTML代碼中的節(jié)點文本，我們可以很容易地實現(xiàn)自定義的樹形菜單。 總之，HTML和jQuery是實現(xiàn)樹形菜單的強大工具。通過上述代碼，希望能夠為各位網(wǎng)站設計師提供一個簡單、靈活和易用的樹形菜單解決方案。