JavaScript自定义折叠菜单和使用Jquery函数库创建折叠菜单

最新推荐文章于 2017-08-20 17:34:00 发布

iteye_10820

最新推荐文章于 2017-08-20 17:34:00 发布

阅读量269

点赞数

分类专栏： JSON编码 +AjAx技术文章标签： js Jquery ViewUI

JSON编码 +AjAx技术专栏收录该内容

5 篇文章

订阅专栏

这几天一直在研究Jquery的ui库的使用,今天下午终于搞定了,其实很简单,就是引用别人写好的函数调用就可以了, 下面分享使用js自定义折叠效果,和使用Jquery创建

js自定义折叠效果;

JavaScript实现思路:

1,将所有的子菜单隐藏

2,触发事件时就传(this,id),区分显示的菜单

//部分html代码;

 <h1 onclick="fun_1(this,'NO0','一')">+ &nbsp;一级菜单</h1>
 <div id="NO0" class="no">
   <h2 onclick="fun_1(this,'NO01','一')">+ &nbsp;一级菜单A_1</h2>
       <ul id="NO01" class="no" >
	        <li>- &nbsp;一级菜单A_1_0</li>
			<li>- &nbsp;一级菜单A_1_1</li>
			<li>- &nbsp;一级菜单A_1_2</li>
			<li>- &nbsp;一级菜单A_1_3</li>
			<li>- &nbsp;一级菜单A_1_4</li>
			<li>- &nbsp;一级菜单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="- &nbsp;"+num+"级菜单";	  //设置点击的菜单是那个
	 }else{
	ids.style.display='';   
	div1.innerHTML="+ &nbsp;"+num+"级菜单";
	 } 
  }

</script>

代码已上传

2,使用Jquery函数库来实现折叠菜单;

由于使用的是Jquery库,所以需要引库,使用src=""

<head>
	<title>Destroydrop &raquo; Javascripts &raquo; 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>

思路:在设置节点的时候设置自己的节点和自己所属的父节点