javascript实现列表的点击展开折叠
时间: 2023-11-29 19:03:28 浏览: 58
可以通过以下代码实现列表的点击展开折叠功能:
HTML代码:
```
<ul id="list">
<li>
<div class="title">标题1</div>
<div class="content">内容1</div>
</li>
<li>
<div class="title">标题2</div>
<div class="content">内容2</div>
</li>
<li>
<div class="title">标题3</div>
<div class="content">内容3</div>
</li>
</ul>
```
CSS代码:
```
.title {
cursor: pointer;
}
.content {
display: none;
}
```
JavaScript代码:
```
var list = document.getElementById('list');
var titles = list.getElementsByClassName('title');
for (var i = 0; i < titles.length; i++) {
titles[i].onclick = function() {
var content = this.nextElementSibling;
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
}
```
解释:
1. 首先通过 `getElementById` 方法获取列表元素,并通过 `getElementsByClassName` 方法获取所有标题元素。
2. 遍历所有标题元素,为每个标题元素添加 `onclick` 事件。
3. 在事件处理函数中,通过 `nextElementSibling` 获取当前标题元素的下一个兄弟元素(即内容元素)。
4. 判断内容元素的 `display` 样式属性是否为 `none`,如果是,则将其设置为 `block`,表示展开;否则将其设置为 `none`,表示折叠。