JavaScript实现树形目录式菜单
/**//**
 *    功能:树形目录式菜单
 *  默认隐藏子菜单,点击主菜单前图标(如:+)展开其子菜单(图标变化为—),再次点击可收起
 *    调用示例:
 *  增加引用:<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 menu function
想对作者说点什么? 我来说一句

树形目录菜单生成器 .rar

2008年07月10日 6KB 下载

javascript实现简单的下拉菜单

2008年10月23日 27KB 下载

DIV+CSS+JS实现树形菜单

allen_he_123 allen_he_123

2017-03-29 17:14:44

阅读数:1593

没有更多推荐了,返回首页

不良信息举报

JavaScript实现树形目录式菜单

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭