这几天一直在研究Jquery的ui库的使用,今天下午终于搞定了,其实很简单,就是引用别人写好的函数 调用就可以了, 下面分享使用js自定义折叠效果,和使用Jquery创建
js自定义折叠效果;
JavaScript实现思路:
1,将所有的子菜单隐藏
2,触发事件时就传(this,id),区分显示的菜单
//部分html代码;
<h1 οnclick="fun_1(this,'NO0','一')">+ 一级菜单</h1> <div id="NO0" class="no"> <h2 οnclick="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>
思路:在设置节点的时候设置自己的节点和自己所属的父节点