JSON折疊顯示是一種在頁面上以樹形結構展示JSON數據的方式。它可以使JSON數據更加清晰、易讀，并且可以提高數據的可視性和可維護性。

在實現JSON折疊顯示之前，需要先將JSON數據轉換為JavaScript對象。一種比較常見的方式是使用JSON.parse()方法將JSON字符串轉為JavaScript對象。轉換完成后，可以通過遍歷對象的屬性和值，生成樹形結構的HTML代碼。

const jsonData = '{"name": "張三", "age": 20, "address": {"city": "上海", "street": "人民路"}}';
const data = JSON.parse(jsonData);
function createTree(data) {
const tree = document.createElement('ul');
for (const key in data) {
const li = document.createElement('li');
if (typeof data[key] === 'object') {
li.innerText = key;
li.appendChild(createTree(data[key]));
} else {
li.innerText = key + ': ' + data[key];
}
tree.appendChild(li);
}
return tree;
}
const tree = createTree(data);
document.body.appendChild(tree);

在上面的代碼中，我們先創建了一個名為jsonData的JSON字符串，然后使用JSON.parse()方法將其轉為JavaScript對象。接著，定義了一個名為createTree的函數，該函數接收一個JavaScript對象作為參數，并返回一個UL標簽，該標簽包含了樹形結構的HTML代碼。函數內部通過遍歷對象的屬性和值，生成樹形結構的HTML代碼，并將其作為LI標簽插入到UL標簽中。

最后，我們調用createTree函數生成樹形結構的HTML代碼，并將其插入到頁面中。

當我們點擊樹形結構中的某個節點時，可以通過JavaScript代碼控制該節點的子節點顯示或隱藏。這里我們使用了classList.toggle()方法實現節點的顯示和隱藏。

document.addEventListener('click', function(e) {
const target = e.target;
if (target.tagName === 'LI') {
target.classList.toggle('open');
const ul = target.querySelector('ul');
if (ul) {
ul.classList.toggle('hidden');
}
}
});

在上面的代碼中，我們通過addEventListener()方法監聽了頁面的click事件。當用戶點擊LI標簽時，會觸發該事件。我們首先判斷點擊的是否是LI標簽，然后使用classList.toggle()方法切換類名以控制節點的顯示和隱藏。同時，我們使用querySelector()方法獲取該節點下的UL標簽，并使用classList.toggle()方法切換類名以控制子節點的顯示和隱藏。

通過以上方法，我們可以輕松地實現JSON折疊顯示的效果，使數據更加清晰可讀。