【JQuery】jQuery自制简易手风琴效果(附实现原理)
来源:互联网 发布:熊熊交友软件 编辑:程序博客网 时间:2024/05/03 20:18
手风琴效果经常会用在网页左侧的导航栏,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,下面就分享一个自己制作的简易手风琴效果,没有用图片,背景颜色也是随意设定的,在实际项目中大家可适当修改。
效果图:
实现原理:
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:路漫漫其修远兮,吾将上下而求索。
0 0
- 【JQuery】jQuery自制简易手风琴效果(附实现原理)
- jQuery自制手风琴效果增强版(附实现原理)
- jquery实现手风琴效果
- jquery实现手风琴效果
- jQuery实现手风琴效果
- 使用jQuery实现手风琴效果
- jquery插件--实现手风琴效果
- jquery插件实现手风琴效果
- jquery插件实现手风琴效果!
- 用jquery实现手风琴效果
- jquery插件实现手风琴效果!
- 三行jquery实现手风琴效果
- Jquery 实现手风琴切换效果
- 用jquery插件实现手风琴效果
- 使用jQuery实现 模拟手风琴效果
- jQuery实现手风琴效果【详细注解】
- jQuery实现手风琴效果【详细注解】
- 基于jQuery实现的手风琴效果Accordion
- Linux____套接字选项
- 架构设计:负载均衡层设计方案(9)——负载均衡层总结下篇
- 人际关系——我的喜好
- bootstrap的html编码规范
- POJ_3262 Protecting the Flowers(greedy)
- 【JQuery】jQuery自制简易手风琴效果(附实现原理)
- 图片拉伸技巧
- Mac下RabbitMQ搭建和管理
- 字符串split
- Objective-C isa 指针 与 runtime 机制
- HDU 1097 A hard puzzle(快速幂)
- 作业:发工资
- php5+apache2+mysql环境安装authpuppy
- Siege的优缺点