* {
padding: 0;
margin: 0;
}
body {
background: url('images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg');
background-size: cover;
}
body::after {
content: '';
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
}
#photo {
position: absolute;
left: 5%;
top: 25%;
}
img {
width: 700px;
height: 400px;
}
#box>ul>li {
color: white;
width: 700px;
height: 60px;
background: rgba(9, 241, 241, 0.4);
text-align: left;
text-indent: 2em;
line-height: 60px;
display: inline-block;
list-style: none;
margin-top: 10px;
}
#box>ul>li:nth-child(even) {
height: 200px;
background: rgba(24, 22, 22, 0.4);
font-family: 'Courier New', Courier, monospace;
color: white;
display: none;
}
#box {
width: 700px;
height: 400px;
position: absolute;
right: 3%;
top: 20%;
}
span {
float: right;
margin-right: 10px;
color: white;
font-weight: 900;
font-size: 20px;
}
- 打开
➖
- 真不错
- 打开
➕
- 真不错
- 打开
➕
- 真不错
- 打开
➕
- 真不错
var li = document.getElementsByTagName('li');
var span = document.getElementsByTagName('span');
li[1].style.display = 'block';
var flag = 0; //1等于关闭
for (var i = 0; i < li.length; i++) {
if (i % 2 == 0) {
li[i].addEventListener('click', function() {
for (var i = 0; i < li.length; i++) {
if (li[i] == this) {
for (var s = 0; s < li.length; s++) {
if (s % 2 != 0) {
li[s].style.display = 'none';
}
}
li[i + 1].style.display = 'block';
if (i == 0) {
for (var s = 0; s < span.length; s++) {
span[s].innerHTML = '➕';
}
span[i].innerHTML = '➖';
} else {
for (var s = 0; s < span.length; s++) {
span[s].innerHTML = '➕';
}
span[i / 2].innerHTML = '➖';
}
/* if (flag == 1) {
flag = 0;
for (var s = 0; s < li.length; s++) {
if (s % 2 != 0) {
li[s].style.display = 'none';
}
}
li[i + 1].style.display = 'none';
break;
}
if (flag == 0) {
flag = 1;
for (var s = 0; s < li.length; s++) {
if (s % 2 != 0) {
li[s].style.display = 'none';
}
}
li[i + 1].style.display = 'block';
} */
}
}
})
}
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
2028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
