js(1)单击同学、朋友和家人的任一项,如果当前列表状态是收缩,则展开,同时其余项收缩;如果当前列表状态是展开,则收缩。 (2)展开项的标题背景色设为红色,其余项的背景色为蓝色。
时间: 2023-10-23 17:09:37 浏览: 41
你可以使用 JavaScript 来实现这个功能。具体的实现思路如下:
1. 获取所有的列表项和它们的标题元素。
2. 给每个标题元素添加点击事件监听器。
3. 当一个标题元素被点击时,判断它所在的列表项的状态(展开或收缩)。
4. 如果状态是展开,则将该列表项收缩,并将其标题背景色设为蓝色。
5. 如果状态是收缩,则将该列表项展开,并将其标题背景色设为红色。同时,将其他列表项收缩,并将它们的标题背景色设为蓝色。
下面是一个简单的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>可折叠列表</title>
<style type="text/css">
.item {
margin-bottom: 10px;
border: 1px solid gray;
padding: 5px;
}
.title {
background-color: blue;
color: white;
padding: 5px;
cursor: pointer;
}
.content {
display: none;
padding: 5px;
}
.open {
background-color: red;
}
</style>
</head>
<body>
<div class="item">
<div class="title">家人</div>
<div class="content">
<p>家人的内容</p>
</div>
</div>
<div class="item">
<div class="title">同学</div>
<div class="content">
<p>同学的内容</p>
</div>
</div>
<div class="item">
<div class="title">朋友</div>
<div class="content">
<p>朋友的内容</p>
</div>
</div>
<script type="text/javascript">
var items = document.querySelectorAll('.item');
var titles = document.querySelectorAll('.title');
for (var i = 0; i < titles.length; i++) {
titles[i].addEventListener('click', function() {
var parent = this.parentNode;
var content = parent.querySelector('.content');
if (parent.classList.contains('open')) {
parent.classList.remove('open');
this.style.backgroundColor = 'blue';
content.style.display = 'none';
} else {
for (var j = 0; j < items.length; j++) {
items[j].classList.remove('open');
titles[j].style.backgroundColor = 'blue';
items[j].querySelector('.content').style.display = 'none';
}
parent.classList.add('open');
this.style.backgroundColor = 'red';
content.style.display = 'block';
}
});
}
</script>
</body>
</html>
```
在上面的示例中,每个列表项都有一个类名为 `item`,其中包含一个类名为 `title` 的元素和一个类名为 `content` 的元素。`title` 元素是列表项的标题,`content` 元素是列表项的内容。初始状态下,所有的列表项都是收缩状态。
在 JavaScript 中,我们使用 `querySelectorAll` 方法来获取所有的列表项和它们的标题元素。然后,我们遍历每个标题元素,给它们添加一个点击事件监听器。
当一个标题元素被点击时,我们首先获取它所在的列表项和它的内容元素。然后,我们判断该列表项的状态是否为展开状态。如果是展开状态,我们将该列表项收缩,并将其标题背景色设为蓝色。如果是收缩状态,我们将其他列表项收缩,并将它们的标题背景色设为蓝色。然后,将该列表项展开,并将其标题背景色设为红色。
为了实现样式的改变,我们使用 CSS 来定义不同状态下的背景色,并使用 JavaScript 来添加或移除类名。同时,我们使用 `display` 属性来控制内容元素的显示或隐藏。
希望这个示例能对你有所帮助!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)