使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369
使用jQuery制作手风琴效果
本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难。
第一步:搭建基本结构。
我使用的是dl dt dd 结构,如下所示: < dl id="sfqclick" > < dt class="leftIco">MainLink-1< /dt> < dd> < a href="#">SubLink-1< /a> < a href="#">SubLink-2< /a> < a href="#">SubLink-3< /a> < /dd> ...... < /dl>
演示:http://www.cssrain.cn/demo/sfq-menu/demo1.html
第二步:添加onclick事件
代码如下: $(document).ready(function(){ //点击触发 $("#sfqclick dt").click(function(){ $(this).toggleClass("bottomIco") .next().slideToggle(300) .siblings("dd").slideUp("slow"); $(this).siblings("dt").removeClass("bottomIco"); }); });
演示:http://www.cssrain.cn/demo/sfq-menu/demo2.html
第三步:当前点击计入cookie ,刷新保持
通过cookie,可以记住客户最后点得目录,然后刷新后,依然保持。
$(document).ready(function(){ //点击触发 $("#sfqclick dt").click(function(){ $(this).toggleClass("bottomIco") .next().slideToggle(300) .siblings("dd").slideUp("slow"); $(this).siblings("dt").removeClass("bottomIco"); var index = $("#sfqclick dt").index(this); $.cookie('the_cookie', index ); // 设置cookie }); var cookievalue= $.cookie('the_cookie'); if( cookievalue){ $("#sfqclick dt").eq(cookievalue).click(); } });
演示:http://www.cssrain.cn/demo/sfq-menu/demo3.html
第四步:改为添加onmouseover事件
直接把 click 改成 mouseover? 当然没那么简单。请你看下Demo4吧。
演示:http://www.cssrain.cn/demo/sfq-menu/demo4.html
第五步:为mouseover事件添加延迟时间设置
通过给mouseover添加延迟,解决了demo4中的bug。
演示:http://www.cssrain.cn/demo/sfq-menu/demo5.html
第六步:在onmouseover的基础上添加onclick
有时候也需要onclick事件,所以需要在onmouseover的基础上,添加onclick。
演示:http://www.cssrain.cn/demo/sfq-menu/demo6.html
第七步:最终效果
大功告成,感谢你看到这里。
演示:http://www.cssrain.cn/demo/sfq-menu/demo7.html
本文所涉及的例子打包下载:
http://www.cssrain.cn/demo/sfq-menu/sfq-menu.rar
使用jQuery制作手风琴效果.(转)相关推荐
- JQuery制作手风琴效果
直接先看效果图 废话不多说直接上代码 HTML代码 <ul><li><div class="flex"><span>曹芳</s ...
- HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效 ...
- jQuery实现手风琴效果
jQuery实现手风琴效果,这里是纵向的,效果图如下: 在此处是当鼠标移动到p上面的时候,p下面的ol里面的内容显现出来 主要用了html,css,jQuery的知识 先把大致需要的东西写出来,此处用 ...
- jQuery制作手风琴
Hi,好久不见,想信大家都对jQuery动画效果有一点的了解,所以今天本人用jQuery动画效果来做一个手风琴效果. 样式展示:这里我用了三个div标签来分了三个职业,背景采用了粉色,每个职业框下面还 ...
- jquery插件手风琴效果
利用插件实现手风琴效果,偶尔有点小收获哦!哈哈 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- Jquery制作手风琴 -- 案例
JQ手风琴制作 @Draven 效果图 jquery插件 html代码 css代码 js代码 效果图 jquery插件 https://download.csdn.net/download/Messc ...
- jQuery自制手风琴效果增强版(附实现原理)
手风琴菜单栏效果通常用在页面左侧,当导航内容比较多时使用手风琴的展示方式更有利于信息的传递和排版,我在http://blog.csdn.net/lzgs_4/article/details/48101 ...
- 制作手风琴效果的注意事项(附代码)
hover的时候先统一所有再定义当前,注意先后顺序,例如: <!doctype html> <html> <head> <meta charset=" ...
- css3制作手风琴,CSS3制作手风琴——CSS3 :target的应用
前一回我在<CSS3制作垂直手风琴>介绍了使用":hover"来制作手风琴效果.今天,你将学习使用CSS3的另一个属性--:target来制作一个非常简单的动画手风琴的 ...
最新文章
- linux du命令重定向,df命令、du命令 、磁盘分区
- centos安装kvm
- alot英文怎么读_【乐学】“原来如此”用英文怎么说?
- Anaconda3+Python3.6搭建Tensorflow
- Java虚拟机笔记(五):JVM中对象的分代
- red5流媒体服务器安装
- 数据库开发常见面试题
- ET框架---UnityWebRequestAsync学习笔记
- 张朝阳一天只睡4小时?不知道,反正我每天都睡足7小时
- [BZOJ3717] [PA2014] Pakowanie [状态压缩][dp]
- 飞秋怎么搜索指定ip好友_飞秋怎么加好友
- 历史的味道(美国人拍摄的1974-1978年中国)
- p坚持csma协议 仿真‘_签了“三方协议”,还算应届毕业生吗!?
- C. Two Shuffled Sequences
- C++中的getline()函数
- Qt 小例子学习33 - QTableWidget 显示点击的行列
- 给博客增加豆瓣观影和阅读
- 安卓项目各文件夹的含义和用处
- 电脑C盘无缘无故就占满了
- Android集成阿里消息推送