这几天一直在研究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>
?
思路:在设置节点的时候设置自己的节点和自己所属的父节点
?
JavaScript自定义折叠菜单和使用Jquery函数库创建折叠菜单
原文：http://baihe747.iteye.com/blog/2164305