关闭

JavaScript实现树形目录式菜单

标签: javascriptmenufunction
1962人阅读 评论(1) 收藏 举报
/**
 *    功能:树形目录式菜单
 *  默认隐藏子菜单,点击主菜单前图标(如:+)展开其子菜单(图标变化为—),再次点击可收起
 *    调用示例:
 *  增加引用:<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';
 }

}

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:23904次
    • 积分:411
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:2篇
    • 译文:1篇
    • 评论:5条
    最新评论