js写的一个简单的手风琴菜单 


  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         div{
 12             outline: 1px white  solid;
 13         }
 14         #out{
 15             width: 300px;
 16             height: 360px;
 17             position: absolute;
 18             left :200px;
 19             top:100px;
 20         }
 21         .menu{
 22             width: 300px;
 23             height: 30px;
 24             background-color:dodgerblue;
 25             text-align: center;
 26             line-height: 30px;
 27         }
 28         .content{
 29             height: 90px;
 30             display: none;
 31         }
 32         ul{
 33             list-style: none;
 34         }
 35         li{
 36             width: 300px;
 37             height: 30px;
 38             outline: 1px blue solid;
 39             background-color: aqua;
 40             text-align: center;
 41             line-height: 30px;
 42         }
 43         .menu:hover{
 44             background-color:mediumblue;
 45             cursor: pointer;
 46         }
 47         li:hover{
 48           background-color: aquamarine;
 49             cursor: pointer;
 50         }
 51 
 52 
 53     </style>
 54 
 55     <script type="text/javascript">
 56         //兼容函数
 57         function getNodeClassName(className){
 58             var array=[];
 59             if(document.all){
 60                 var node=document.getElementsByClassName("*");
 61                 for(var i=0;i<node.length;i++){
 62                     if(node[i].className==className){
 63                         array.push(node[i]);
 64                     }
 65                 }
 66             }else{
 67                 array=document.getElementsByClassName(className);
 68             }
 69             return array;
 70         }
 71 
 72         //兼容函数
 73         function getNode(obj){
 74            var node=obj.nextSibling;
 75             if(node.nodeType==3 && /^\s+$/.test(node.nodeValue)){
 76                 node = node.nextSibling;
 77             }
 78             return node;
 79         }
 80 
 81         //兼容函数
 82         function getStyle(obj,attr){
 83             return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
 84         }
 85 
 86        window.onload=function(){
 87            var menu=getNodeClassName('menu');
 88            for(var i=0;i<menu.length;i++){
 89                menu[i].onclick=function(){
 90                    var node=getNode(this);
 91                   var dis=getStyle(node,'display');
 92                    if(dis=='block'){
 93                        node.style.display='none';
 94                    }else{
 95                        node.style.display='block';
 96                    }
 97 
 98                }
 99            }
100 
101         }
102     </script>
103 </head>
104 <body>
105 <div id="out">
106     <div class="menu">java</div>
107     <div class="content">
108         <ul>
109             <li>封装</li>
110             <li>继承</li>
111             <li>多态</li>
112         </ul>
113     </div>
114     <div class="menu">菜单二</div>
115     <div class="content">
116         <ul>
117             <li>子菜单一</li>
118             <li>子菜单二</li>
119             <li>子菜单三</li>
120         </ul>
121     </div>
122     <div class="menu">菜单三</div>
123     <div class="content">
124         <ul>
125             <li>子菜单一</li>
126             <li>子菜单二</li>
127             <li>子菜单三</li>
128         </ul>
129     </div>
130 
131 
132 </div>
133 </body>
134 </html>
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         div{
 12             outline: 1px white  solid;
 13         }
 14         #out{
 15             width: 300px;
 16             height: 360px;
 17             position: absolute;
 18             left :200px;
 19             top:100px;
 20         }
 21         .menu{
 22             width: 300px;
 23             height: 30px;
 24             background-color:dodgerblue;
 25             text-align: center;
 26             line-height: 30px;
 27         }
 28         .content{
 29             height: 90px;
 30             display: none;
 31         }
 32         ul{
 33             list-style: none;
 34         }
 35         li{
 36             width: 300px;
 37             height: 30px;
 38             outline: 1px blue solid;
 39             background-color: aqua;
 40             text-align: center;
 41             line-height: 30px;
 42         }
 43         .menu:hover{
 44             background-color:mediumblue;
 45             cursor: pointer;
 46         }
 47         li:hover{
 48           background-color: aquamarine;
 49             cursor: pointer;
 50         }
 51 
 52 
 53     </style>
 54 
 55     <script type="text/javascript">
 56         //兼容函数
 57         function getNodeClassName(className){
 58             var array=[];
 59             if(document.all){
 60                 var node=document.getElementsByClassName("*");
 61                 for(var i=0;i<node.length;i++){
 62                     if(node[i].className==className){
 63                         array.push(node[i]);
 64                     }
 65                 }
 66             }else{
 67                 array=document.getElementsByClassName(className);
 68             }
 69             return array;
 70         }
 71 
 72         //兼容函数
 73         function getNode(obj){
 74            var node=obj.nextSibling;
 75             if(node.nodeType==3 && /^\s+$/.test(node.nodeValue)){
 76                 node = node.nextSibling;
 77             }
 78             return node;
 79         }
 80 
 81         //兼容函数
 82         function getStyle(obj,attr){
 83             return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
 84         }
 85 
 86        window.onload=function(){
 87            var menu=getNodeClassName('menu');
 88            for(var i=0;i<menu.length;i++){
 89                menu[i].onclick=function(){
 90                    var node=getNode(this);
 91                   var dis=getStyle(node,'display');
 92                    if(dis=='block'){
 93                        node.style.display='none';
 94                    }else{
 95                        node.style.display='block';
 96                    }
 97 
 98                }
 99            }
100 
101         }
102     </script>
103 </head>
104 <body>
105 <div id="out">
106     <div class="menu">java</div>
107     <div class="content">
108         <ul>
109             <li>封装</li>
110             <li>继承</li>
111             <li>多态</li>
112         </ul>
113     </div>
114     <div class="menu">菜单二</div>
115     <div class="content">
116         <ul>
117             <li>子菜单一</li>
118             <li>子菜单二</li>
119             <li>子菜单三</li>
120         </ul>
121     </div>
122     <div class="menu">菜单三</div>
123     <div class="content">
124         <ul>
125             <li>子菜单一</li>
126             <li>子菜单二</li>
127             <li>子菜单三</li>
128         </ul>
129     </div>
130 
131 
132 </div>
133 </body>
134 </html> 
posted @ 2015-11-01 09:48  NAYNEHC  阅读(837)  评论(0)    收藏  举报