用JS实现列表伸缩 (1)单击同学、朋友和家人的任一项,如果当前列表状态是收缩,则展开,同时其余项收缘. 如果当前列表状态是展开,则收缩。(2)展开项的标题背景色设为红色,其余项的背景色为蓝色
时间: 2023-10-15 12:03:53 浏览: 74
可以通过以下JS代码来实现列表的伸缩:
HTML结构:
```
<ul>
<li class="list-item">同学</li>
<ul class="sub-list">
<li>小明</li>
<li>小红</li>
<li>小刚</li>
</ul>
<li class="list-item">朋友</li>
<ul class="sub-list">
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<li class="list-item">家人</li>
<ul class="sub-list">
<li>爸爸</li>
<li>妈妈</li>
<li>哥哥</li>
<li>姐姐</li>
</ul>
</ul>
```
CSS样式:
```
.list-item {
cursor: pointer;
background-color: blue;
color: white;
padding: 5px;
}
.sub-list {
display: none;
}
.sub-list.active {
display: block;
}
.sub-list li {
padding: 5px;
}
.sub-list.active + .list-item {
background-color: red;
}
```
JS代码:
```
const listItems = document.querySelectorAll('.list-item');
listItems.forEach((item) => {
item.addEventListener('click', () => {
const subList = item.nextElementSibling;
listItems.forEach((listItem) => {
const otherSubList = listItem.nextElementSibling;
if (subList === otherSubList) {
return;
}
otherSubList.classList.remove('active');
listItem.classList.remove('active');
});
subList.classList.toggle('active');
item.classList.toggle('active');
});
});
```
解释:
1. 首先获取所有的列表项,并为每个列表项添加点击事件监听器。
2. 当点击某个列表项时,获取其下一个兄弟元素(即子列表),并遍历所有列表项,将除当前列表项外的子列表收缩,并将其他列表项的背景色改为蓝色。
3. 将当前列表项的子列表展开,并将当前列表项的背景色改为红色。如果当前列表项已经展开,则将其子列表收缩,并将背景色改为蓝色。