本文实例讲述了jQuery实现的简单手风琴效果。分享给大家供大家参考,具体如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net jQuery手风琴效果& lt;/title>
& lt; style>
.wrap{宽度:200 px;高度:汽车;保证金:50 px汽车;border - radius: 5 px}
ul、李、h5 {list-style:没有,保证金:0;填充:0}
.wrap> ul {border - radius: 5 px}
李.wrap> ul>{背景:# E4644B; text-align:中心;边界底部:固体1 px # DED1D1;颜色:# fff;游标:指针;位置:相对;}
.wrap> ul>李:胎{边界底部:没有;}
李.wrap> ul> h5{填充:8 0 px;}
李.wrap> ul跨度{:绝对;:5 px;右:12 px;字体大小:22 px;颜色:# fff;显示:inline-block;}
李.wrap> ul> .child-ul{背景:# fff;显示:没有;}
李.wrap> ul>李.child-ul{颜色:# 000;行高:40 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="包装"比;
& lt; ul类=安说ァ北?
& lt; li>
& lt; h5>软件jiaoxue
& lt; span> + & lt;/span>
& lt; ul类=癱hild-ul”比;
& lt; li> java
& lt; li>网络前端& lt;/li>
& lt; li>安卓开发& lt;/li>
& lt; li>软件测试& lt;/li>
& lt;/ul>
& lt;/li>
& lt; li>
& lt; h5>游戏动漫& lt;/h5>
& lt; span> + & lt;/span>
& lt; ul类=癱hild-ul”比;
& lt; li> java
& lt; li>网络前端& lt;/li>
& lt; li>安卓开发& lt;/li>
& lt; li>软件测试& lt;/li>
& lt;/ul>
& lt;/li>
& lt; li>
& lt; h5>电商企业& lt;/h5>
& lt; span> + & lt;/span>
& lt; ul类=癱hild-ul”比;
& lt; li>淘宝& lt;/li>
& lt; li>天猫& lt;/li>
& lt; li>京东& lt;/li>
& lt; li>苏宁易购& lt;/li>
& lt;/ul>
& lt;/li>
& lt; li>
& lt; h5>营销培训& lt;/h5>
& lt; span> + & lt;/span>
& lt; ul类=癱hild-ul”比;
& lt; li> seo
& lt; li>微信营销& lt;/li>
& lt; li>网络创业& lt;/li>
& lt; li>市场营销& lt;/li>
& lt;/ul>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;脚本src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(函数(){
$ (“.wrap> ul>李”)。(“点击”,函数(){
下=$ var(这)定格(“.child-ul”);=$ var图标(这)定格(“跨度”);
next.slideToggle(“褪色”);
如果(icon.html ()===" + ") {
icon.html (“-”);
其他}{
icon.html (“+”);
}
$ (' .child-ul ')自身之外(下).slideUp(“快”);//不是当前点击的内容全部向上收起
$ (' .wrap> ul>李')定格(“跨度”)自身之外(图标). html (“+”);
返回错误;
}）
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
使用:http://tools.jb51.net/code/HtmlJsRun测试,运行结果如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》,《jQuery扩展技巧总结》,《jQuery常用插件及用法总结》,《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
