用html写一个折叠列表
时间: 2023-05-29 07:07:09 浏览: 90
以下是一个基本的折叠列表HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>折叠列表</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
}
li {
padding: 5px;
cursor: pointer;
}
li:hover {
background-color: #f2f2f2;
}
ul ul {
display: none;
padding-left: 20px;
}
li.open > ul {
display: block;
}
li.open:before {
content: "-";
margin-right: 5px;
}
li.closed:before {
content: "+";
margin-right: 5px;
}
</style>
</head>
<body>
<ul>
<li class="closed">列表一</li>
<ul>
<li>子项一</li>
<li>子项二</li>
<li>子项三</li>
</ul>
<li class="closed">列表二</li>
<ul>
<li>子项一</li>
<li>子项二</li>
<li>子项三</li>
</ul>
<li class="closed">列表三</li>
<ul>
<li>子项一</li>
<li>子项二</li>
<li>子项三</li>
</ul>
</ul>
<script type="text/javascript">
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
this.classList.toggle("open");
});
}
</script>
</body>
</html>
```
代码中使用了CSS样式来定义列表的样式,使用了JavaScript来实现点击折叠/展开列表项的功能。其中,`li.closed`类表示列表项处于折叠状态,`li.open`类表示列表项处于展开状态。点击列表项时,JavaScript代码将切换这两个类来实现折叠/展开的效果。