jQuery实现手风琴效果

咱们在项目总常常会遇到制做手风琴效果的需求。其实实现手风琴效果不难，特别是使用jQuery来实现，就更加简单了。这里给你们分享两个手风琴效果的制做方法。

1、横向手风琴图片切换效果

• 最终的效果图：

• 备注：

  1. 为了方便你们清晰明地阅读代码，我将一些没必要要的部分去掉了，也就是每张图片下方的导航文字去掉了。
  2. 想要源代码的同窗可在文末获取，整个DEMO的源码在文末有下载连接。
  3. 由于这个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');
        });
    });

});

2、竖向手风琴菜单切换效果

• 最终的效果图：

• 备注：

  1. 竖版菜单的样式比较简陋，你们在本身的项目中直接进行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('+');
    });
});

3、项目源代码下载连接

• 土豪入口：CSDN下载-只须要2积分

• 新手小白入口：百度云连接-若是连接失效，可在评论区留言