JavaScript自定义折叠菜单和使用Jquery函数库创建折叠菜单
这几天一直在研究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>思路:在设置节点的时候设置自己的节点和自己所属的父节点
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17