html 树形菜单

html 树形菜单_第1张图片

 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);">menu1span>
46                     li>
47                     <ul style="display:none;" id="u1">
48                         <li><a href="#">item1a>li>
49                         <li><a href="#">item2a>li>
50                     ul>
51                     <li>
52                         <span onclick="doAction(2);">menu2span>
53                     li>
54                     <ul style="display:none;" id="u2">
55                         <li><a href="#">item1a>li>
56                         <li><a href="#">item2a>li>
57                     ul>
58                 ul>
59             div>
60         div>
61     body>
62 html>

 

转载于:https://www.cnblogs.com/smile361/archive/2012/08/21/2649456.html

你可能感兴趣的:(html 树形菜单)