【JQuery】jQuery自制简易手风琴效果(附实现原理)
2015-08-30 09:48
886 查看
手风琴效果经常会用在网页左侧的导航栏,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,下面就分享一个自己制作的简易手风琴效果,没有用图片,背景颜色也是随意设定的,在实际项目中大家可适当修改。
效果图:
实现原理:
1、当鼠标点击span标签(即一级导航)时,先判断子目录li是否已经展开(此处使用一个on类来做标记);
2、如果是,则收缩当前的li,移出on类标记,修改span右边的提示符为加号;
3、如果不是,则展开当前的li,增加on类标记,修改span右边的提示符为减号。
源码:
好啦,这样一个简单的手风琴就做好啦~
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
效果图:
实现原理:
1、当鼠标点击span标签(即一级导航)时,先判断子目录li是否已经展开(此处使用一个on类来做标记);
2、如果是,则收缩当前的li,移出on类标记,修改span右边的提示符为加号;
3、如果不是,则展开当前的li,增加on类标记,修改span右边的提示符为减号。
源码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>自制手风琴</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <style type="text/css"> body,ul,li{margin: 0 auto;padding: 0;} ul,li{list-style-type: none;cursor: pointer;color: white;line-height: 28px;text-align: center;} ul{width: 150px;} ul span{background-color: green;display: block;font-weight: bold;border-bottom: 1px solid #ccc;} ul:last-child span{border-bottom: none;} li{background-color: black;display: none;} li:hover{background-color: orange;} b{display: inline;float: right;padding-right: 10px;} </style> </head> <body> <ul> <span>AAAAA<b>+</b></span> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> <ul> <span>BBBBB<b>+</b></span> <li>22222</li> <li>22222</li> <li>22222</li> </ul> <ul> <span>CCCCC<b>+</b></span> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li> <li>33333</li> </ul> <ul> <span>DDDDD<b>+</b></span> <li>44444</li> <li>44444</li> </ul> <ul> <span>EEEEE<b>+</b></span> <li>55555</li> <li>55555</li> <li>55555</li> </ul> <script type="text/javascript"> $(function(){ $('span').click(function(){ if($(this).siblings('li').hasClass('on')){ $(this).siblings('li').slideUp(500).removeClass('on'); $(this).children('b').text('+'); }else{ $(this).siblings('li').slideDown(500).addClass('on'); $(this).children('b').text('-'); } }); }); </script> </body> </html>
好啦,这样一个简单的手风琴就做好啦~
Author:致知
Sign:路漫漫其修远兮,吾将上下而求索。
相关文章推荐
- jQuery.extend 函数详解
- jQuery中this与$(this)的区别
- jQuery div层渐入渐出效果
- jQueryMobile的组件之列表(listview)
- jQuery鼠标事件汇总
- IE8下jQuery改变png图片透明度时出现的黑边
- jquery.mousewheel实现整屏翻屏效果
- jQueryMobile的组件之栅格系统(grid)
- jQuery中的事件和动画
- jQuery File Upload
- JS添加节点方法与JQuery添加节点方法的比较及总结
- Jquery对象,DOM对象
- JQuery选择器
- JQuery 自动触发事件
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
- jQuery图片特效脚本prettyPhoto简介
- jquery 中 live事件委派 与 bind事件绑定
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- jquery专业的导航菜单特效代码分享
- 利用jquery完成表单域的收集,利用ajax实现信息传递给服务器存储