这几天一直在研究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>
思路:在设置节点的时候设置自己的节点和自己所属的父节点
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
