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>
时间： 2024-08-01 17:39:44