jQuery是一種非常流行的JavaScript庫，可以簡化web開發中的許多常見任務。其中之一是創建通訊錄樹形結構。本文將介紹如何使用jQuery創建通訊錄樹形結構，并理解相關代碼。

首先，我們需要在HTML中創建一個用于顯示通訊錄的div元素，如下所示：

<div id="directory"></div>

接下來，我們需要使用jQuery異步請求一個JSON文件，該文件包含通訊錄數據：

$.getJSON("directory.json", function(data) {
// 操作JSON數據
});

一旦我們成功加載了JSON數據，我們就可以開始構建通訊錄樹形結構。我們需要使用遞歸函數來遍歷所有條目。以下是遞歸函數的代碼：

function buildTree(data, parent) {
var ul = $("<ul></ul>");
$.each(data, function(key, val) {
var li = $("<li></li>").appendTo(ul);
$("<a></a>").text(val.name).appendTo(li);
if (val.children) {
buildTree(val.children, li);
}
});
ul.appendTo(parent);
}

遞歸函數將每個條目添加到列表中，并遞歸子目錄（如果存在）。最后，我們只需要將列表附加到我們在HTML中創建的div元素：

$.getJSON("directory.json", function(data) {
buildTree(data, $("#directory"));
});

到目前為止，我們所有的代碼都應該被包括在document ready事件中，以確保DOM被完全加載。以下是完整的示例代碼：

$(document).ready(function() {
$.getJSON("directory.json", function(data) {
buildTree(data, $("#directory"));
});
function buildTree(data, parent) {
var ul = $("<ul></ul>");
$.each(data, function(key, val) {
var li = $("<li></li>").appendTo(ul);
$("<a></a>").text(val.name).appendTo(li);
if (val.children) {
buildTree(val.children, li);
}
});
ul.appendTo(parent);
}
});

通訊錄樹形結構創建完畢！現在您可以根據需要對其進行樣式化和自定義。