首页各地市人口数据的折叠菜单javascript

各地市人口数据的折叠菜单javascript

时间: 2024-12-23 10:19:24 浏览: 6

在JavaScript中，处理各地市的人口数据并创建一个折叠菜单通常涉及到前端开发，特别是使用HTML、CSS和JavaScript库（如jQuery或React）。这里是一个简单的示例，假设我们有一个JSON数组存储着地市及其对应的人口： ```html <!DOCTYPE html> <html lang="en"> <head> <title>人口折叠菜单</title> <style> .city { display: none; } .active { display: block; } </style> </head> <body> <ul id="cityMenu">  </ul> <script> const data = [ { name: '北京', population: '2154万' }, { name: '上海', population: '2428万' }, { name: '广州', population: '1302万' }, // 更多数据... ]; function populateCityMenu() { const menu = document.getElementById('cityMenu'); data.forEach(item => { const li = document.createElement('li'); li.textContent = item.name + ': ' + item.population; const cityContent = document.createElement('div'); cityContent.className = 'city'; cityContent.textContent = `详细信息: ${item.population}人`; li.addEventListener('click', function() { if (this.classList.contains('active')) { this.classList.remove('active'); cityContent.style.display = 'none'; } else { Array.from(menu.children).forEach(child => child.classList.remove('active')); this.classList.add('active'); cityContent.style.display = 'block'; } }); menu.appendChild(li); li.appendChild(cityContent); }); } populateCityMenu(); </script> </body> </html> ``` 这个例子中，我们首先创建了一个`ul`元素作为容器，并遍历`data`数组，为每个城市创建一个列表项（`li`）。点击列表项时，它会切换其包含的详细信息区域（`.city`类的元素）的显示状态。

阅读全文