- 浏览: 588301 次
文章分类
- 全部博客 (411)
- 常用工具 (21)
- 喜好 (14)
- 英语 (3)
- java (51)
- ext (4)
- css (44)
- php (34)
- window (7)
- jquery (21)
- js (31)
- struts (4)
- tomcat (1)
- struts2 (11)
- 网络 (4)
- c# (7)
- linux (27)
- oracle (15)
- tag标签 (5)
- 生成静态页面 (6)
- sql (12)
- hibernate (13)
- DesignPattern (3)
- spring (2)
- flex (17)
- excel应用 (1)
- 报表 (2)
- 业界 (2)
- 数据建模 (1)
- 平板 (1)
- ppt (1)
- rich (1)
最新评论
-
youngdze:
受教了,谢谢!
十步解决php utf-8编码 -
DiLiya:
感谢你的讲解;帮了大忙了!
解决-innerHTML无法在TBODY中使用 -
eppen:
强的没话说。帮了大忙。感谢goby2008 ,感谢google ...
解决-innerHTML无法在TBODY中使用 -
cxs4808:
rr
flex 设计模式 -
liuxingvsyou:
3个jQuery弹出窗口插件
折叠菜单的功能很常见,实现的方法也很多,甚至可以用纯CSS来实现。
而今天我做的这个例子是在jQuery下实现折叠菜单的功能,非常简单究竟有多
简单呢?看例子吧
html结构
简单说明一下:<DL><DT><DD>这三个标签虽然不太常用,不过我认为在很多
时候使用这个“自定义序列”要比使用 <UL><LI>的组合更符合语,不过这都是后话。
如果你是初学者,可以忽略这个问题。
这个折叠菜单dem的原理:全部DD隐藏,点击DT,展开后面的DD。
<dl>
<dt>商品管理</dt>
<dd>
<ul>
<li><a href="goods_post.jsp">商品发布</a></li>
<li><a href="goods_search.jsp">商品查询</a></li>
<li><a href="goods_type.jsp">商品分类</a></li>
<li><a href="goods_brand.jsp">品牌维护</a></li>
<li><a href="goods_bbs.jsp">商品评论</a></li>
</ul>
</dd>
<dt>顾客信息</dt>
<dd>
<ul>
<li><a href="client_search.jsp">顾客查询</a></li>
<li><a href="client_total.jsp">顾客统计</a></li>
</ul>
</dd>
<dt>跟单管理</dt>
<dd>
<ul>
<li><a href="order_search.jsp">订单查询</a></li>
<li><a href="order_log.jsp">物流配送</a></li>
<li><a href="order_confirm.jsp">收货确认</a></li>
<li><a href="order_total.jsp">订单统计</a></li>
</ul>
</dd>
<dt>统计数据</dt>
<dd>
<ul>
<li><a href="goods_rank.jsp">商品排行</a></li>
<li><a href="sales_report.jsp">销售报表</a></li>
</ul>
</dd>
<dt>资讯管理</dt>
<dd>
<ul>
<li><a href="info_post.jsp">资讯发布</a></li>
<li><a href="info_search.jsp">资讯查询</a></li>
</ul>
</dd>
</dl>
<dt>商品管理</dt>
<dd>
<ul>
<li><a href="goods_post.jsp">商品发布</a></li>
<li><a href="goods_search.jsp">商品查询</a></li>
<li><a href="goods_type.jsp">商品分类</a></li>
<li><a href="goods_brand.jsp">品牌维护</a></li>
<li><a href="goods_bbs.jsp">商品评论</a></li>
</ul>
</dd>
<dt>顾客信息</dt>
<dd>
<ul>
<li><a href="client_search.jsp">顾客查询</a></li>
<li><a href="client_total.jsp">顾客统计</a></li>
</ul>
</dd>
<dt>跟单管理</dt>
<dd>
<ul>
<li><a href="order_search.jsp">订单查询</a></li>
<li><a href="order_log.jsp">物流配送</a></li>
<li><a href="order_confirm.jsp">收货确认</a></li>
<li><a href="order_total.jsp">订单统计</a></li>
</ul>
</dd>
<dt>统计数据</dt>
<dd>
<ul>
<li><a href="goods_rank.jsp">商品排行</a></li>
<li><a href="sales_report.jsp">销售报表</a></li>
</ul>
</dd>
<dt>资讯管理</dt>
<dd>
<ul>
<li><a href="info_post.jsp">资讯发布</a></li>
<li><a href="info_search.jsp">资讯查询</a></li>
</ul>
</dd>
</dl>
jQuery代码
仅仅只需6行,看清楚喽
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ //实现折叠菜单
$("#sideBar dt").click(function(){ //向DT添加一个click事件
$("#sideBar dd").css("display","none");
$(this).next("dd").css("display","block"); //点击DT时,显示DT后第一个DD
});
});
</script>
<script>
$(document).ready(function(){ //实现折叠菜单
$("#sideBar dt").click(function(){ //向DT添加一个click事件
$("#sideBar dd").css("display","none");
$(this).next("dd").css("display","block"); //点击DT时,显示DT后第一个DD
});
});
</script>
最终效果
- CANAE9FZ.rar (1.1 KB)
- 下载次数: 446
评论
3 楼
binghejinjun
2011-12-10
如果三级四级五级菜单呢,该怎么动态的加?例如li下还有子菜单,该怎么添加?
2 楼
hehebaiy
2011-10-29
很好很强大~~~~~
1 楼
qp3db
2011-10-02
使用 slideUp,slideDown两个函数会更棒。
发表评论
-
33个jQuery效果实例
2011-04-12 10:06 845今天搜索jquery 的拖拽效果时发 ... -
jQuery–20个最新的jQuery效果.
2011-04-12 09:20 10151. Custom Animation Banner with ... -
jQuery.Switchable 1.0
2010-10-12 00:21 1069jQuery.Switchable是一款整合了Tabs、Sli ... -
11个代码高亮的实现方法(转)
2010-09-28 08:40 105811个代码高亮的实现方法 来源: webresource ... -
用jQuery判断一个元素是否显示
2010-08-08 14:01 1024用jQuery判断一个元素是否显示:$(element). ... -
3个jQuery弹出窗口插件
2010-07-23 09:36 49233个jQuery弹出窗口插件 -
用jquery写一个简单的菜单伸缩效果
2010-07-19 16:01 1121<!DOCTYPE html PUBLIC " ... -
jquery 实现checkbox全选、取消全选
2010-04-04 16:48 1186<input type=”checkbox” name= ... -
jQuery 实现自动增长的文本输入框
2010-04-04 16:45 1024(function($) { $.fn.auto ... -
simple tree 添加子树
2010-04-03 23:42 895//Select first child node in t ... -
渐渐消失
2010-03-20 23:21 735$(#testObj).html("ok" ... -
jquery设置按钮的disabled属性
2010-03-20 22:45 3863在html标签中设置按钮被禁用,可以使用如下代码<inp ... -
jquery常用代码
2010-03-20 10:21 705jquery常用代码 -
jquery iframe操作
2009-12-09 23:25 4464使用jquery操作iframe 1 内容里有两个ifame ... -
jquery插件
2009-12-07 13:07 771http://css9.net/flexible-ui-lib ... -
jquery常用插件
2009-10-22 23:07 1345tooltips http://craigsworks.c ... -
JQuery Block UI V2
2009-09-24 12:41 946http://www.cssrain.cn/demo/bloc ... -
jquery资源
2009-08-31 08:13 632jQueryAPI参考文档中文版翻译 http ... -
关于jQuery的动画制作.
2009-07-09 22:33 707http://www.cssrain.cn/article.a ... -
jquery学习笔记
2008-11-24 22:38 700http://www.cssrain.cn/search.as ...
相关推荐
jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单jquery折叠菜单
jQuery多级折叠菜单,有例子
该资源主要实现两点 1. jquery实现菜单折叠 2.css自动增长圆角背景的实现 个人能力有限,代码有诸多不足之处,仅作参考使用。
HTML jquery实现左侧菜单折叠,简单易学,适合新手。。。
jquery展开折叠菜单插件 漂亮 完美 易学习,值得分享。展开折叠菜单插件。
Jquery折叠菜单.实现菜单树形折叠。具体的样式需要自己调节
Jquery实现三级折叠,菜单。
JQuery实现菜单折叠效果源码 源码描述: 一、源码特点 1、jQuery实现菜单折叠效果,可实现菜单折叠,欢迎下载 二、注意事项 1、开发环境为Visual Studio 2013,使用.net 4.0开发。
jQuery可折叠图标菜单 jQuery可折叠图标菜单网页特效.zip
jQuery折叠菜单,自适应浏览器高度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title> NarBar table ; charset=gb2312" ...
这是一款炫酷的jquery水平手风琴折叠菜单效果。该jquery风琴折叠菜单效果以1870年为主题,在切换菜单项时带有幻影效果,并在整体上配以炫酷的文字动画效果。
jQuery多级折叠展开树形菜单代码是一款简单实用的树形结构菜单插件,数据封装在data.js里面,直接修改调用即可。
jQuery的垂直可折叠菜单特效, 使用简单,只需要加载jquery插件。兼容主流浏览器
jQuery折叠下拉菜单收缩展开是一款橙色样式风格的二级菜单导航代码。
本文主要介绍了jquery实现折叠菜单效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
jQuery动画垂直折叠导航效果
用jquery UI实现的手风琴菜单、折叠菜单