我们在项目总经常会遇到制作手风琴效果的需求。其实实现手风琴效果不难，特别是使用jQuery来实现，就更加简单了。这里给大家分享两个手风琴效果的制作方法。
一、横向手风琴图片切换效果
- 最终的效果图：
效果展示图
- 备注：
- 为了方便大家清晰明地阅读代码，我将一些不必要的部分去掉了，也就是每张图片下方的导航文字去掉了。
- 想要源代码的同学可在文末获取，整个DEMO的源码在文末有下载链接。
- 因为这个DEMO非常简单，所以大家直接通过阅读代码即可掌握。代码中也会有简单的笔记，所以这里就不在赘述。直接上代码！
- HTML代码：
<div class="box">
<ul>
<li class="active imgBox"><img src="images/1.jpg" alt="图片"></li>
<li class="imgBox"><img src="images/2.jpg" alt="图片"></li>
<li class="imgBox"><img src="images/3.jpg" alt="图片"></li>
<li class="imgBox"><img src="images/4.jpg" alt="图片"></li>
<li class="imgBox"><img src="images/5.jpg" alt="图片"></li>
<li class="imgBox"><img src="images/6.jpg" alt="图片"></li>
<li class="imgBox"><img src="images/7.jpg" alt="图片"></li>
</ul>
</div>
- CSS代码：
*{
margin: 0;
padding: 0;
}
.box{
width: 1139px;
height: 405px;
margin: 20px auto;
}
.box ul{
width: 100%;
height: 100%;
list-style: none;
background-color: black;
overflow: hidden;
}
.box ul .imgBox{
width: 100px;
height: 405px;
display: inline-block;
float: left;
box-sizing: border-box;
overflow: hidden;
opacity: 0.4;
position: relative;
}
.box ul .active{
width: 538px;
height: 405px;
opacity: 1;
}
.box ul .imgBox>img{
height: 100%;
cursor: pointer;
}
- js代码（注意提前移入jQuery库）：
$(function(){
// 获取页面中包含图片的li元素
var imgLi=$('.imgBox');
$.each(imgLi,function(index,value){
$(value).mouseenter(function(e){
// 这里一定要注意，先使用stop()停止之前的动画，再开始后面的动画，否则会有不足
$(this).stop().animate({'width':'538px','opacity':'1'},'200');
$(this).siblings('.imgBox').stop().animate({'width':'100px','opacity':'0.4'},'200');
});
});
});
二、竖向手风琴菜单切换效果
- 最终的效果图：
效果图
- 备注：
- 竖版菜单的样式比较简陋，大家在自己的项目中直接进行CSS样式修改即可。
- HTML代码：
<!-- 基础版本的HTML -->
<div id="box1">
<p><strong>手风琴·基础版本</strong></p>
<ul class='first_ul'>
<span class="m">悬疑推理 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
<ul>
<span class="m">古装武侠 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
<ul>
<span>职场小说 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
<ul class='last_ul'>
<span>仙侠奇幻 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
</div>
<!-- 改进版本的HTML -->
<div id="box2">
<p><strong>手风琴·改进版本</strong></p>
<ul class='first_ul'>
<span class="m">悬疑推理 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
<ul>
<span class="m">古装武侠 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
<ul>
<span>职场小说 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
<ul class='last_ul'>
<span>仙侠奇幻 <b>+</b></span>
<li>分类一</li>
<li>分类二</li>
<li>分类三</li>
<li>分类四</li>
</ul>
</div>
- CSS代码：
body{
display: flex;
justify-content: center;
}
div{
width: 400px;
height: 600px;
display: inline-block;
border: 4px solid #ccc;
border-radius: 10px;
float: left;
margin: 60px 40px;
}
div p{
margin: 40px auto;
text-align: center;
letter-spacing: 6px;
}
ul{
width: 140px;
background-color: antiquewhite;
margin: 0 20px;
padding: 0 0 0px 0;
list-style: none;
border-top: 2px solid #ccc;
border-left: 2px solid #ccc;
border-right: 2px solid #ccc;
margin: 0 auto;
overflow: hidden;
}
.first_ul{
border-radius: 8px 8px 0 0;
}
.last_ul{
border-radius: 0 0 8px 8px;
}
ul span{
width: 100%;
display: inline-block;
background-color: #a0beb0;
padding: 0px 6px;
box-sizing: border-box;
cursor: pointer;
}
ul span b{
float: right;
}
ul li{
display: none;
cursor: pointer;
}
ul li:hover{
background-color: #bbdbcd;
}
- js代码（注意提前移入jQuery库）：
$(function(){
// 基础版本的手风琴菜单效果
$('#box1 span').click(function(){
var curLi=$($(this).parent().find('li')); //获取点击的一级菜单对应的二级菜单
// 通过判断二级菜单是否收起，来进行判断是否展开，并更换"+ -"表示
if(curLi.css('display') == 'none'){
curLi.slideDown();
$(this).find('b').text('-');
}
else {
curLi.slideUp();
$(this).find('b').text('+');
}
});
// 改进版本的手风琴菜单效果
$('#box2 span').click(function(){
var curLi=$(this).parent().find('li'); //获得当前点击的菜单的二级菜单
var restUl=$(this).parent().siblings('ul'); //获得没有点击的一级菜单
// 通过判断二级菜单是否收起，来进行判断是否展开，并更换"+ -"表示
if(curLi.css('display') == 'none') {
curLi.slideDown();
curLi.parent().find('b').text('-');
}
else {
curLi.slideUp();
curLi.parent().find('b').text('+');
}
// 没有点击的二级菜单全部收起，并将标志全部改为"+"
restUl.find('li').slideUp();
restUl.find('b').text('+');
});
});
三、项目源代码下载链接
土豪入口：CSDN下载-只需要2积分
新手小白入口：百度云链接-如果链接失效，可在评论区留言
