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';
 }

}

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript树形目录.rar

  • 2007-05-08 13:06
  • 12KB
  • 下载

树形目录结构 竖线+扩展+收缩 图标的实现

最近实现了一个竖线目录的结构图如下: 上图左侧为竖线 加伸缩扩展图标; 分析有5种状态:如图 下面实现:package cn.vko.ring.common.weight;import cn...

VS2005下树形目录的实现

  • 2010-05-16 09:14
  • 204KB
  • 下载

unix树形目录结构

unix操作系统采用树形带沟连的目录结构,如下图所示,在这种结构中,一个文件的名字是由根目录到该文件的路径上所有节点名按顺序构成的,相互之间用“/”分开,如文件pong的全路径名为:/user/smi...

树形目录文件输出工具

  • 2014-12-28 23:31
  • 534KB
  • 下载

vim插件:显示树形目录插件NERDTree安装 和 使用

下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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