用javascript结合CSS做可折叠菜单
下面给出一个示例代码:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>无标题文档</title>
6
<style type="text/css">
7
<!--
8
.menuLink {
9 font-size: 16px;
10 font-weight: bold;
11
}
12.menu1 {
13 margin-top: 5px;
14 list-style-type: none;
15}
16.menu {
17 margin-top: 5px;
18 list-style-type: none;
19 display:none;
20}
21
-->
22</style>
23</head>
24
25<body>
26<div>
27<a href="test2.html" class="menuLink">Click me here</a>
28<ul class="menu" id="test2">
29 <li><a href="test2.html">gong xu</a></li>
30 <li><a href="test2.html">gong xu</a></li>
31 <li><a href="test2.html">gong xu</a></li>
32 <li><a href="test2.html">gong xu</a></li>
33 <li><a href="test2.html">gong xu</a></li>
34</ul>
35</div>
36
37<div>
38<a href="test1.html" class="menuLink">Click me here</a>
39<ul class="menu" id="test1">
40 <li><a href="test2.html">gong xu</a></li>
41 <li><a href="test2.html">gong xu</a></li>
42 <li><a href="test2.html">gong xu</a></li>
43 <li><a href="test2.html">gong xu</a></li>
44 <li><a href="test2.html">gong xu</a></li>
45</ul>
46</div>
47
48<script language="javascript" type="text/javascript">
49window.onload=initAll;
50
51
52function initAll()
53{
54//alert("haha");
55 var allLinks=document.getElementsByTagName("a");
56 var thisLink;
57 for(var i=0;i<allLinks.length;i++)
58 {
59 thisLink=allLinks[i];
60
61 if(thisLink.className.indexOf("menuLink")>-1)
62 {
63
64 thisLink.onclick=togSlide;
65 }
66 }
67}
68function togSlide()
69{
70 var startMenu=this.href.lastIndexOf("/")+1;
71 var stopMenu=this.href.lastIndexOf(".");
72 // alert(this.href);
73 var thismenuLink=this.href.substring(startMenu,stopMenu);
74 var thismenu=document.getElementById(thismenuLink).style;
75 thismenu.display=(thismenu.display=="none")?"block":"none";
76 //alert(thismenuLink);
77 return false;
78}
79</script>
80</body>
81</html>
82
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>无标题文档</title>6
<style type="text/css">
7
<!--8
.menuLink {
.menuLink 9
font-size: 16px;10
font-weight: bold;11
}12
.menu1 {13
margin-top: 5px;14
list-style-type: none;15
}16
.menu {17
margin-top: 5px;18
list-style-type: none;19
display:none;20
}21
-->22
</style>23
</head>24
25
<body>26
<div>27
<a href="test2.html" class="menuLink">Click me here</a>28
<ul class="menu" id="test2">29
<li><a href="test2.html">gong xu</a></li>30
<li><a href="test2.html">gong xu</a></li>31
<li><a href="test2.html">gong xu</a></li>32
<li><a href="test2.html">gong xu</a></li> 33
<li><a href="test2.html">gong xu</a></li>34
</ul>35
</div>36
37
<div>38
<a href="test1.html" class="menuLink">Click me here</a>39
<ul class="menu" id="test1">40
<li><a href="test2.html">gong xu</a></li>41
<li><a href="test2.html">gong xu</a></li>42
<li><a href="test2.html">gong xu</a></li>43
<li><a href="test2.html">gong xu</a></li> 44
<li><a href="test2.html">gong xu</a></li>45
</ul>46
</div>47
48
<script language="javascript" type="text/javascript">49
window.onload=initAll;50
51
52
function initAll()53
{54
//alert("haha");55
var allLinks=document.getElementsByTagName("a");56
var thisLink;57
for(var i=0;i<allLinks.length;i++)58
{59
thisLink=allLinks[i];60
61
if(thisLink.className.indexOf("menuLink")>-1)62
{63
64
thisLink.onclick=togSlide;65
}66
}67
}68
function togSlide()69
{70
var startMenu=this.href.lastIndexOf("/")+1;71
var stopMenu=this.href.lastIndexOf(".");72
// alert(this.href);73
var thismenuLink=this.href.substring(startMenu,stopMenu);74
var thismenu=document.getElementById(thismenuLink).style;75
thismenu.display=(thismenu.display=="none")?"block":"none";76
//alert(thismenuLink);77
return false;78
}79
</script>80
</body>81
</html>82
浙公网安备 33010602011771号