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

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

时间: 2024-12-23 22:19:45 浏览: 3

在JavaScript中，为了实现各地市人口数据的折叠菜单功能，通常我们会使用HTML、CSS以及JavaScript（特别是jQuery库或者原生JavaScript）来构建。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>折叠菜单</title> <style> .city-data { display: none; } .show { /* 初始隐藏所有城市数据 */ display: block; } </style> </head> <body> <button onclick="toggleCities()">显示/隐藏城市数据</button> <ul id="cityList"> <li class="city show">北京 - 2154万人</li> <li class="city">上海 - 2428万人</li> <li class="city">广州 - 1404万人</li>  </ul> <script> function toggleCities() { var cityItems = document.querySelectorAll('#cityList li'); for (var i = 0; i < cityItems.length; i++) { cityItems[i].classList.toggle('show'); } } </script> </body> </html> ``` 在这个例子中，每个城市的列表项默认有一个`class="city"`，表示它们都是初始隐藏状态（`.city-data`）。点击按钮时，`toggleCities`函数会遍历所有城市列表项并切换他们的`show`类，当有这个类时，对应的列表

阅读全文