JavaScript实现树形目录式菜单

原创 2007年09月25日 10:56:00
/**//**
 *    功能:树形目录式菜单
 *  默认隐藏子菜单,点击主菜单前图标(如:+)展开其子菜单(图标变化为—),再次点击可收起
 *    调用示例:
 *  增加引用:<script type="text/javascript" src="TreeMenu.js"></script>
 *      页面代码:
 *  <div id="menu1" onclick="TreeMenu(this,'child1')">
 *   <img src="plus.gif" ><a href="#">菜单1</a>
 *  </div> 
 *   <div id="child1" style="display:none">
 *       <a href="#">页面1</a><br>
 *       <a href="#">页面2</a>
 *   </div>
 *  <div id="menu2" onclick="TreeMenu(this,'child2')">
 *   <img src="plus.gif"><a href="#">菜单2</a>
 *  </div>
 *   <div id="child2" style="display:none">
 *        <a href="#">页面1</a><br>
 *        <a href="#">页面2</a>
 *   </div>
 *
 
*/


function TreeMenu(node,id)
...{
 
var sibling = document.getElementById(id);

 
if (sibling.style.display == 'none')
 
...{
  
if (node.childNodes.length > 0)
  
...{
   
if (node.childNodes[0].tagName == "IMG")
   
...{
    node.childNodes[
0].src = "minus.gif"//替换为展开时的图片
   }

  }


  sibling.style.display 
= '';
 }

 
else
 
...{
  
if (node.childNodes.length > 0)
  
...{
   
if (node.childNodes[0].tagName == "IMG")
   
...{
    node.childNodes[
0].src = "plus.gif";  //替换为收起时的图片
   }

  }

  sibling.style.display 
= 'none';
 }

}

 

4行代码简单实现js树形菜单

通常情况下,我们都会用到一些树形菜单,但一时间苦于不知道如何选择合适的控件进行整合。 于是打算自己尝试弄个简单的树形菜单。在这过程中,我发现: 对于一棵简单的树形菜单,4行代码足矣。 html...
  • dyllove98
  • dyllove98
  • 2013年04月27日 14:03
  • 3343

DIV+CSS+JS实现树形菜单

  • allen_he_123
  • allen_he_123
  • 2017年03月29日 17:14
  • 991

非常简洁的仿js树形菜单

非常简洁的仿js树形菜单
  • sinat_31016743
  • sinat_31016743
  • 2016年01月12日 22:15
  • 5994

三行代码实现树形菜单(多种风格的菜单展示)

风格1:图片路径为help/tree;风格2:图片路径为base/tree(轻开B2C电子商务网站组织机构实例,文件为base/xml/tree.html);风格3:图片路径为help/tree/1;...
  • tx18
  • tx18
  • 2015年04月04日 09:12
  • 8236

js实现一个简单的树形菜单

在做练习的时候做到这个,想想觉得常常会用到,就做了下。看了下给的代码,晕了,小白菜看这种代码会晕的啊~~书的题目是《精通HTML5+CSS3+JavaScript网页设计》,小白拿来做练习,在这里吐槽...
  • woshixkl
  • woshixkl
  • 2016年07月22日 14:23
  • 3076

前端 js树形菜单代码

TODO sup
  • dengfei00100
  • dengfei00100
  • 2015年12月29日 16:03
  • 3177

简单的 ul li 树形菜单

简单的 ul li 树形菜单在实际开发中,我们经常遇到树形菜单,闲暇之余,特此简单研究了一下,欢迎吐槽!前言 所谓的树形菜单,无非就是 ul li的嵌套使用,如果有两级目录,就需要在li里再嵌套一...
  • u011613356
  • u011613356
  • 2015年11月12日 15:36
  • 2289

示例学习-树形菜单的形成---使用vue.js

第一步,获得树形数据 对于渲染成一个树形菜单,也就是我们平时见到的多级菜单,我们首先要将数据处理成树形结构。这里笔墨不多写了,假设我们拿到的demoData就已经是的了。 第二步,渲染数据 假设我们拿...
  • mia1106
  • mia1106
  • 2017年08月01日 17:27
  • 1562

11个Javascript树形菜单

转自:http://paranimage.com/11-javascript-tree-menus/ 树形菜单能很好的呈现菜单项之前的从属关系,结构清晰明了。本文为你收集了11个Java...
  • hdchangchang
  • hdchangchang
  • 2013年12月11日 14:24
  • 1628

angularjs--制作树形菜单

效果图 数据源 /* Controllers */ function ctrDataList($scope) { $scope.ctrDataList_list = [ { "title"...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2016年01月15日 17:40
  • 5200
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript实现树形目录式菜单
举报原因:
原因补充:

(最多只允许输入30个字)