<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴案例</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 100vh;
background-image: url(../img/li2.png);
background-size: cover;
background-position: center center;
display: flex;
justify-content: center;
align-items: center;
}
ul {
width: 800px;
height: 400px;
}
ul li {
width: 80px;
height: 100%;
float: left;
background-size: cover;
background-position: center center;
/* 添加过渡属性 */
transition: .3s;
}
.open {
width: 480px;
}
li p {
width: 80px;
height: 100%;
background-color: rgba(255, 255, 255, .5);
color: white;
font-size: 60px;
}
</style>
</head>
<body>
<ul>
<li class="open" style="background-image:url(../img/li2.png) ;">
<p>李溪芮</p>
</li>
<li style="background-image:url(../img/c罗.png) ;">
<p>c罗</p>
</li>
<li style="background-image:url(../img/meixi.png) ;">
<p>梅西</p>
</li>
<li style="background-image:url(../img/dd.png) ;">
<p>德布劳内</p>
</li>
<li style="background-image:url(../img/nme.png) ;">
<p>内马尔</p>
</li>
</ul>
</body>
<script>
//获取li
var lis = document.getElementsByTagName("li");
var showIndex = 0;//当前展开open的下标
for (var i = 0; i < lis.length; i++) {
//动态为li添加属性
lis[i].index = i;
lis[i].onclick = function () {
if (showIndex === this.index) {
return;
}
//收起来已经展开的li
//1.暴力解决for循环
//2.动态添加下标
lis[showIndex].className = "";
//展开点击的li(this)
this.className = "open";
//xiugai showIndex
showIndex = this.index;
//修改body的背景图
document.body.style.backgroundImage = this.style.backgroundImage;
}
}
</script>
</html>
案例结果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试三</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 730px;
/* height: 480px; */
}
ul li {
width: 100%;
/* height: 320px; */
background-color: skyblue;
}
.open {
width: 100%;
height: 240px;
background-color: pink;
display: none;
}
ul li p {
width: 100%;
height: 80px;
height: 80px;
line-height: 80px;
font-size: 24px;
color: #fff;
overflow: hidden;
}
ul li p span {
font-size: 20px;
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<p>
全栈技能<span>+展开</span>
</p>
<div class="open">
数据库 主流框架 第三方生态 软件模式 领域驱动设计
</div>
</li>
<li>
<p>
交付技能<span>+展开</span>
</p>
<div class="open">
数据库 主流框架 第三方生态 软件模式 领域驱动设计
</div>
</li>
<li>
<p>
底层技能<span>+展开</span>
</p>
<div class="open">
数据库 主流框架 第三方生态 软件模式 领域驱动设计
</div>
</li>
</ul>
</body>
<script>
var dSpan = document.querySelectorAll("span");
var dOpen = document.querySelectorAll(".open");
var showIndex = 0;
for (var i = 0; i < dSpan.length; i++) {
dSpan[i].index = i;
dSpan[i].onclick = function () {
// if (showIndex === this.index) return;
if (showIndex === 0) {
for (var j = 0; j < dOpen.length; j++) {
dOpen[j].style.display = "none";
}
this.parentNode.nextElementSibling.style.display = "block";
this.innerHTML = '^收缩';
showIndex = 1;
} else {
this.parentNode.nextElementSibling.style.display = "none";
this.innerHTML = '+展开';
showIndex = 0;
}
}
}
// console.log(dSpan)
// console.log(lis)
// console.log(i)
</script>
</html>
案例结果如下: