JavaScript实现树状显示

前几天,去一家国企机试的时候,遇到一道使用JavaScript实现树状显示的题目.这篇文章是本人的一点点心得,有不好的地方,希望各位高手斧正. 内容来自dedecms

切入正题吧.树状显示,将需要展示给用户看的资料显示,将用户不想看到的内容隐藏.我们要做的只是获取用户所点击的对象,再判断对象的状态.当其状态为显示时,我们将它隐藏.反之,将它显示.使用html的<ul>以及<li>这两个标签可以很多地做到这一点.

copyright dedecms

<ul>
   <li>
    <!-- href="#"表示伪连接.当用户点击时,不跳转 -->
    <a id="products" href="#">[+]Product</a>
    <ul id="productsmenu" style="display: none">
     <li>Product</li>
     <li>Other Form</li>
     <li>Price</li>
    </ul>
   </li>
  </ul> 织梦好，好织梦

学习JavaScript比较麻烦的地方是浏览器兼容问题.这里的var whichlink = (e.target) ? e.target.id : e.srcElement.id;是根据不同的浏览器拿到其所兼容的对象的ID值event.target是firefox上的,而event.srcElement是IE4以上的.

<script type="text/javascript">
   //由于document.getElementById()频繁被使用,这里简化成$()
   function $(id){
    return document.getElementById(id);
   }
  
   function toggle(e){
    if(!e){
     //如果没有定义e,则给e赋值window的事件对象event
     e = window.event;
    }
    
    /*
     firefox 下的 event.target = IE 下的 event.srcElement.
     当e.target没有被定义时,使用IE下的e.srcElement.id.
     反之,则使用e.target.id.
    */
    var whichlink = (e.target) ? e.target.id : e.srcElement.id;
    
    var obj = $(whichlink+"menu"); 织梦好，好织梦
    //获取obj是否显示
    var visible = (obj.style.display=="block");
    var key = $(whichlink);
    var keyname = key.firstChild.nodeValue.substring(3);
    
    if(visible){
     obj.style.display = "none";
     key.firstChild.nodeValue = "[+]" + keyname;
    }else{
     obj.style.display = "block";
     key.firstChild.nodeValue = "[-]" + keyname;;
    }
    
    /*
     防止滚动条滑动.由于使用了伪连接,当点击连接时,浏览器虽然不跳转,但滚动条会置顶,
     这里加上return false;可以防止滚动条置顶
    */
    return false;
   }

本文只是对树状显示,进行简单的描述与实现,不周的地方,希望大家见谅.

本文来自织梦