在前端開發中，我們常常需要處理來自服務器的數據。其中，JSON是一種非常常見的數據格式，它可以方便地進行跨語言數據交換。當我們需要在網頁上呈現JSON數據時，強大的折疊菜單功能可以幫助用戶更好地瀏覽數據。
下面是一個簡單的JSON示例：
{
"name": "apple",
"color": "red",
"price": 2.5
}接下來，我們將使用JavaScript和HTML代碼創建一個基本的JSON折疊菜單。
<html>
<head>
<script>
function toggleMenu(event) {
// 獲取點擊事件對象，并取消默認行為
var target = event.target || event.srcElement;
event.preventDefault();
// 根據當前菜單狀態切換折疊
var menu = target.nextElementSibling;
if (menu.style.display === 'none') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
}
function buildMenu(data, node) {
// 獲取節點，并清空其子元素
var ul = document.createElement('ul');
ul.innerHTML = '';
// 遍歷JSON數據，并加入菜單項
for (var key in data) {
var li = document.createElement('li');
var span = document.createElement('span');
span.textContent = key;
span.onclick = toggleMenu;
li.appendChild(span);
if (typeof data[key] === 'object') {
buildMenu(data[key], li);
} else {
var pre = document.createElement('pre');
pre.textContent = JSON.stringify(data[key], null, 2);
li.appendChild(pre);
}
ul.appendChild(li);
}
// 將菜單加入父節點
node.appendChild(ul);
}
// 獲取JSON數據并創建折疊菜單
var jsonData = {"name": "apple", "color": "red", "price": 2.5};
var container = document.getElementById('container');
buildMenu(jsonData, container);
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>以上代碼將在網頁上顯示一個折疊菜單，每個節點都對應JSON數據中的一個鍵值對。當用戶點擊節點時，它將展開或折疊其子節點。對于JSON數據中的值，我們使用pre標簽顯示其內容，方便用戶查看。
通過該方法，我們可以方便地將JSON數據呈現給用戶，并使其更好地理解和瀏覽數據。