如何练就优秀的项目体验
创意、流程、执行缺一不可
CREATIVITY, PROCESS, PERFORM INDISPENSABLE
原创jquery实现折叠菜单
2016-09-08

这是本人自己用jq写的折叠菜单,

折叠速度还可以在jq的slideToggle上调整,

加入了点击标题改变样式效果


*html

<div class="zhedie">
    <ul>
        <li>
            <div class="biaoti">标题1</div>
            <div class="neirong">内容1</div>
        </li>
        <li>
            <div class="biaoti">标题2</div>
            <div class="neirong">内容2</div>
        </li>
        <li>
            <div class="biaoti">标题3</div>
            <div class="neirong">内容3</div>
            </li>
    </ul>
</div>



*css

.body{background-color: #FF6600;}
.zhedie{width: 326px;}
.zhedie ul li{margin-bottom: 2px;}
.biaoti{background-color: #282828;font-weight: bold;letter-spacing: 2px;line-height: 50px;color: #FFFFFF;display:block;margin: 0 5px;cursor: pointer;}
.biaoti_hover{color: #FFFFFF;background-color: #55ceff;padding: 0 5px;margin: 0;}
.neirong{width:296px;height:109px;background-color: #FFFFFF;color: #666666;font-size: 12px;line-height: 20px;margin: 2px 0 0 5px;padding: 18px 10px;overflow: hidden;display: none;}


*js

$(function(){
    var zhedieLi=$('.zhedie ul li');
    var biaoti=zhedieLi.find('.biaoti')
    var neirong=zhedieLi.find('.neirong')
    zhedieLi.each(function(index){
        biaoti.eq(index).on('click',function(){
            neirong.eq(index).slideToggle();
            $(this).addClass('biaoti_hover');
            biaoti.not(biaoti.eq(index)).removeClass('biaoti_hover');
            neirong.not(neirong.eq(index)).slideUp();
        })
    })
})





CONTACT US
  • 服务热线:020-22099360
  • 广州技术总部:广州市天河区天河北路179号尚层国际21层
  • 邮箱:admin@bangju.com
扫一扫加客服微信