html 树形菜单

最新推荐文章于 2021-06-17 02:25:56 发布

weixin_30757793

最新推荐文章于 2021-06-17 02:25:56 发布

阅读量284

点赞数

原文链接：http://www.cnblogs.com/smile361/archive/2012/08/21/2649456.html

版权

 1 <html>
 2     <head>
 3         <style>
 4             #d1{
 5                 width:200;
 6                 height:400;
 7                 background-color:#cccccc;
 8                 border:2px solid black;
 9                 left:30;
10                 top:30;
11                 position:absolute;
12             }
13             #d1_head{
14                 height:30;
15                 background-color:blue;
16                 color:white;
17                 font-size:20pt;
18             }
19             #d1_body{
20                 background-color:#cccccc;
21             }
22         </style>
23         <script>
24             function doAction(index){
25                 var obj = document.getElementById('u' + index);
26                 if(obj.style.display == 'none'){
27                         obj.style.display = 'block';
28                 }else{
29                         obj.style.display = 'none';
30                 }
31             }
32             
33             function test(){
34                 var obj = document.getElementById('l1');
35                 alert(obj.innerHTML);
36             }
37         </script>
38     </head>
39     <body style="font-size:20pt;">
40         <div id="d1">
41             <div id="d1_head">菜单</div>
42             <div id="d1_body">
43                 <ul>
44                     <li>
45                         <span onclick="doAction(1);">menu1</span>
46                     </li>
47                     <ul style="display:none;" id="u1">
48                         <li><a href="#">item1</a></li>
49                         <li><a href="#">item2</a></li>
50                     </ul>
51                     <li>
52                         <span onclick="doAction(2);">menu2</span>
53                     </li>
54                     <ul style="display:none;" id="u2">
55                         <li><a href="#">item1</a></li>
56                         <li><a href="#">item2</a></li>
57                     </ul>
58                 </ul>
59             </div>
60         </div>
61     </body>
62 </html>