描述: 实现手风琴效果
1.简易版(纯JQ,不带动画)
划上每一个标题, 让其紧跟的图片宽度变成295px,其余图片宽度变成0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.active {
display: block;
}
#wrap {
width: 375px;
height: 190px;
margin: 20px auto;
border: 1px solid #333;
}
#wrap ul li span {
display: inline-block;
width: 20px;
height: 190px;
color: #ffffff;
cursor: pointer;
text-align: center;
}
#wrap ul li:nth-of-type(1) span {
background-color: #330033;
float: left;
}
#wrap ul li:nth-of-type(2) span {
background-color: #ff00ff;
float: left;
}
#wrap ul li:nth-of-type(3) span {
background-color: #990033;
float: left;
}
#wrap ul li:nth-of-type(3) span {
background-color: #990033;
float: left;
}
#wrap ul li:nth-of-type(4) span {
background-color: #ff0000;
float: left;
;
}
#wrap ul li img {
width: 0px;
height: 190px;
float: left;
}
#wrap ul li .active {
width: 295px;
}
</style>
</head>
<body>
<!-- 1.布局 -->
<!-- 2. 手风琴
布局: 4个标题 + 1张图片的宽度
划上每一个标题 让她紧跟的图片宽度变成270 其余图片宽度变成0 -->
<div id="wrap">
<ul>
<li>
<span>第一幅图的展示效果</span>
<img src="./imgs/1.jpg" alt="" class="active">
</li>
<li>
<span>第二幅图的展示效果</span>
<img src="./imgs/2.jpg" alt="">
</li>
<li>
<span>第三幅图的展示效果</span>
<img src="./imgs/3.jpg" alt="">
</li>
<li>
<span>第四幅图的展示效果</span>
<img src="./imgs/4.jpg" alt="">
</li>
</ul>
</div>
<script src="./jquery.js"></script>
<script>
/* 划上每一个标题 让她紧跟的图片宽度变成270 其余图片宽度变成0 */
$('span').mouseenter(function () {
// console.log($(this));
/* // 排他
$('img').removeClass('active');
// 将标题对应的图片显示出来
$(this).next().addClass('active'); */
$(this).next().addClass('active').parent().siblings().children('img').removeClass('active');
})
</script>
</body>
</html>