基于jquery实现的折叠式菜单
2016-07-15 00:00
295 查看
1、源码
以下是源码,很方便的能引入的自己项目中<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqueryTest</title> <script type="text/javascript" src="../js/jquery-1.3.2.js" ></script> <style type="text/css"> body,div{ margin:0;padding:0;} #menu {width:200px;} .has_children{ background:url(../image/bg_title.gif) no-repeat; padding:8px 0 8px 25px; font-weight:bold; cursor:pointer; margin:0; display:block; } .highlight{ background:url(../image/bg_title_visited.gif) no-repeat; padding:8px 0 8px 25px; color:#f59000; font-weight:bold; cursor:auto; margin:0; display:block; } .highlight a{ margin-top:10px; } a:hover { color: #000000; background-color:#dfdfdf; text-decoration:underline; font-weight:normal; margin-top:10px; } .has_children a{ display:none; width:auto; } </style> <script type="text/javascript"> $(function(){ $(".has_children").click( function(){ //元素 $(this).siblings().filter(".highlight").children("a").slideToggle("normal"); $(this).end().siblings().filter(".highlight").children("a").slideToggle("normal"); if($(this).children("a").is(":hidden"))//隐藏 { $(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示 $(this).removeClass("has_children"); $(this).addClass("highlight"); }else{ $(this).children("a").slideToggle("normal");//slideToggle 隐藏或者显示 $(this).removeClass("highlight"); $(this).addClass("has_children"); } $(this).siblings().filter(".highlight").removeClass("highlight").addClass("has_children"); }); }); </script> </head> <body> <div id="menu"> <div class="has_children"> <span>研发中心</span> <a href="#">研发中心一部</a> <a href="#">研发中心二部</a> <a href="#">研发中心三部</a> <a href="#">研发中心四部</a> <a href="#">研发中心五部</a> </div> <div class="has_children"> <span>销售部</span> <a href="#">华北区</a> <a href="#">华南区</a> <a href="#">东北区</a> <a href="#">江南区</a> </div> <div class="has_children"> <span>行政部</span> <a href="#">行政部所有人员</a> <a href="#">行政部所有人1员</a> <a href="#">行政部所有人2员</a> </div> <div class="has_children"> <span>行政1部</span> <a href="#">行政部所有人1员</a> <a href="#">行政部所有人11员</a> <a href="#">行政部所有人12员</a> </div> </div> </body> </html>
2、资源图片
所需要的两张图片3、执行效果
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码