js实现跨浏览器好友列表

最新推荐文章于 2021-01-04 16:17:34 发布

简单的绿竹

最新推荐文章于 2021-01-04 16:17:34 发布

阅读量783

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zunguitiancheng/article/details/46648911

版权

JS 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=GBK">
       <title>Untitled Document</title>
       <style type="text/css">
           /*
           对表格中的ul进行样式定义，
           1，去除无序列表的样式。
           2，将列表的外边距取消。
           */
           table ul{
               list-style:none;
               margin:0px;
               background-color:#26e356;
               display:none;
               /*border:#ff0000 1px solid;*/
               padding:0px;
           }

           /*
           * 对表格框线进行定义。
           * 以及单元格的框线进行定义。
           */
           table{
               border:#8080ff 1px solid;
               width:80px;
           }
           table td{
               border:#8080ff 1px solid;
               background-color:#f3c98f;
               padding:0px;
           }

           /*
           * 单元格中的超链接样式。
           */
           table td a:link,table td a:visited{
               color:#1f6df1;
               text-decoration:none;
           }
           table td a:hover{
               color:#df4011;
           }
           /*预定一些样式*/
           .open{
               display:block;
           }
           .close{
               display:none;
           }
       </style>
   </head>
   <body>

       

       <script type="text/javascript">
           function list(node){
               //获取被操作的节点ul。
               /*
               * 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。
               */
               var oTdNode = node.parentNode;

               var oUlNode = oTdNode.getElementsByTagName("ul")[0];



               //获取表格中所有的ul。
               //先获取表格节点对象。
               var oTabNode = document.getElementById("goodlist");
               var collUlNodes = oTabNode.getElementsByTagName("ul");

               for(var x=0; x<collUlNodes.length; x++){

                   if(collUlNodes[x]==oUlNode){
                       if(oUlNode.className == "open"){
                           oUlNode.className = "close";
                       }else{
                           oUlNode.className = "open";
                       }
                   }else{
                       collUlNodes[x].className = "close";
                   }
               }

//               alert(oUlNode.nodeName);//oUlNode.className

           }
       </script>
       <table id="goodlist">
           <tr>
               <td>
                   <a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
                   <ul>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                   </ul>
               </td>
           </tr>
           <tr>
               <td>
                   <a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
                   <ul>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                   </ul>
               </td>
           </tr>
           <tr>
               <td>
                   <a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
                   <ul>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                   </ul>
               </td>
           </tr>
           <tr>
               <td>
                   <a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
                   <ul>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                       <li>一个好友</li>
                   </ul>
               </td>
           </tr>
       </table>
   </body>
</html>