这几天一直在研究Jquery的ui库的使用,今天下午终于搞定了,其实很简单,就是引用别人写好的函数 调用就可以了, 下面分享使用js自定义折叠效果,和使用Jquery创建
js自定义折叠效果;
JavaScript实现思路:
1,将所有的子菜单隐藏
2,触发事件时就传(this,id),区分显示的菜单
//部分html代码;
<h1 onclick="fun_1(this,'NO0','一')">+ 一级菜单</h1> <div id="NO0" class="no"> <h2 onclick="fun_1(this,'NO01','一')">+ 一级菜单A_1</h2> <ul id="NO01" class="no" > <li>- 一级菜单A_1_0</li> <li>- 一级菜单A_1_1</li> <li>- 一级菜单A_1_2</li> <li>- 一级菜单A_1_3</li> <li>- 一级菜单A_1_4</li> <li>- 一级菜单A_1_5</li> </ul> </div>
js代码:
<script type="text/javascript"> function fun_1(div1,id1,num){ var ids = document.getElementById(id1);//获取点击时的id if(!ids.style.display){ //如果是不显示的 ids.style.display='inherit'; //设置为显示 div1.innerHTML="- "+num+"级菜单"; //设置点击的菜单是那个 }else{ ids.style.display=''; div1.innerHTML="+ "+num+"级菜单"; } } </script>
代码已上传
2,使用Jquery函数库来实现折叠菜单;
由于使用的是Jquery库,所以需要引库,使用src=""
<head> <title>Destroydrop » Javascripts » Tree</title> <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> </head>
定义折叠菜单; 以上图显示的人力资源为例子
<script type="text/javascript"> <!-- d = new dTree('d'); //定义自己的节点和父节点(0,-1) d.add(0,-1,'菜单栏'); //定义自己的节点和父节点(4,0) d.add(4,0,'人力资源','example01.html'); d.add(308,4,'部门管理','example01.html'); d.add(309,4,'员工管理','example01.html'); document.write(d); //--> </script>
思路:在设置节点的时候设置自己的节点和自己所属的父节点
相关推荐
第1章 第一个简单的jQuery程序...解决jQuery库后于其他库导入时变量“$”的使用权 使用子查询优化选择器性能 减少对DOM元素直接操作 DOM对象与jQuery对象的类型转换 第11章 应用案例-聊天室系统 应用案例_图片切割
书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版的基础上新增了两章,讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法,也深入探讨...
《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的jQuery代码段进行了全方位的介绍和演示。全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
9.2.1 浏览器的检测 9.2.2 数组和对象的操作 9.2.3 字符串操作 9.2.4 测试操作 9.2.5 url操作 9.3 工具函数的扩展 9.4 其他工具函数—$.proxy() 9.5 综合案例分析—使用jquery扩展工具函数实现对...
4.3.1 创建和使用基本的正则表达式 84 4.3.2 构建一个正则表达式 85 4.3.3 分组正则表达式的部分 88 4.3.4 有用的正则表达式 89 4.3.5 匹配模式 94 4.3.6 替换文本 96 4.3.7 尝试正则表达式 97 4.4 数值 97 4.4.1 把...
手上Javascript 源代码...例子jQuery 文档: : target= 自我文档: : self特征使用 google-code-prettify 突出显示源语法使用 jsbeautifier.org 美化(未缩小)JS 提取的函数定义集可以被视为列或树嵌套函数声明折叠
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
数据核心该库可用于处理要输入 jQuery Flot 或其他图表插件的数据。 单独的效用函数也可用于将数据处理成有用的格式。 OQL,或对象查询库,是一个简单的界面,可帮助您在插入 Datalier 之前修改数据。为什么选择 ...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
这里使用的唯一库是 d3; 它与外部链接(由于 Drupal 的工作方式,当该项目在 SEAS 站点上实时显示时,还会有少量 jQuery,但为了简单起见,此处已将其省略)。 Process Book 也位于存储库 (ProcessBook.pdf) 的根...
javascript中(function($){...})(jQuery)写法是指的是是匿名函数。 function(arg){...}这也定义了一个匿名函数,参数为arg。 测试样例参见test/AnonymousFunction.html .navbar-fixed-top使导航条固定在顶部 Index...