Jquery竖伸缩菜单
其中<script type="text/javascript" src="../js/jquery.js"></script>只要引用的是你的Jquery自带的js文件即可
代码
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 <script type="text/javascript" src="../js/jquery.js"></script>
7 <script type="text/javascript">
8 $(document).ready(
9 function()
10 {
11 $(".menuTitle").click(function(){
12 $(this).next("div").slideToggle("slow").siblings(".menuContent:visible").slideUp("slow");
13 $(this).toggleClass("activeTitle");//如果当前div存在这个类名称，那么就删除否则就添加
14 $(this).siblings(".activeTitle").removeClass("activeTitle");
15 });
16 });
17
18 </script>
19 <style type="text/css">
20 body
21 {
22 margin:0;background-color:#9ad075;
23 }
24 .container
25 {
26 width:100%; text-align:center;
27 }
28 .menuTitle
29 {
30 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
31 }
32 .Title
33 {
34 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
35 }
36 .activeTitle
37 {
38 width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
39 }
40 .menuContent
41 {
42 background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;margin-bottom:6px;
43 }
44 li
45 {
46 background:url(images/arr.gif) no-repeat 20px 6px ; border-bottom:dotted 1px #000000; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;
47 }
48 ul
49 {
50 margin:0;padding:0;margin-bottom:6px;
51 }
52 .menuContent ul li a{ text-decoration:none;}
53 </style>
54 </head>
55 <body>
56 <div class="container">
57 <div class="Title">我的商铺</div>
58 <div></div>
59 <div class="menuTitle">供应信息</div>
60 <div class="menuContent">
61 <ul>
62 <li><a href="javascript:void(0);">发布供应信息</a></li>
63 <li><a href="javascript:void(0);">管理供应信息</a></li>
64 <li><a href="javascript:void(0);">自定义分类</a></li>
65 </ul>
66 </div>
67 <div class="menuTitle">求购信息</div>
68 <div class="menuContent">
69 <ul>
70 <li><a href="javascript:void(0);">发布求购信息</a></li>
71 <li><a href="javascript:void(0);">管理求购信息</a></li>
72 <li><a href="javascript:void(0);">自定义分类</a></li>
73 </ul>
74 </div>
75 <div class="menuTitle">公司信息</div>
76 <div class="menuContent">
77 <ul>
78 <li><a href="javascript:void(0);">公司信息</a></li>
79 <li><a href="javascript:void(0);">证书上传</a></li>
80 <li><a href="javascript:void(0);">证书管理</a></li>
81 <li><a href="javascript:void(0);">相册上传</a></li>
82 <li><a href="javascript:void(0);">相册管理</a></li>
83 </ul>
84 </div>
85 <div class="menuTitle">留言管理</div>
86 <div class="menuContent">
87 <ul>
88 <li><a href="javascript:void(0);">收件箱</a></li>
89 <li><a href="javascript:void(0);">发件箱</a></li>
90 <li><a href="javascript:void(0);">收藏夹</a></li>
91 </ul>
92 </div>
93 <div class="menuTitle">会员管理</div>
94 <div class="menuContent">
95 <ul>
96 <li><a href="javascript:void(0);">修改资料</a></li>
97 <li><a href="javascript:void(0);">修改密码</a></li>
98 </ul>
99 </div>
100 <div class="menuTitle">以商会友</div>
101 <div class="menuContent">
102 <ul>
103 <li><a href="javascript:void(0);">进入论坛</a></li>
104 </ul>
105 </div>
106 <div class="menuTitle">在线帮助</div>
107 <div class="menuContent">
108 <ul>
109 <li><a href="javascript:void(0);">在线帮助</a></li>
110 <li><a href="javascript:void(0);">在线客服</a></li>
111 </ul>
112 </div>
113 <div class="menuTitle">系统信息</div>
114 <div class="menuContent">
115 <ul>
116 <li><a href="javascript:void(0);">安全退出</a></li>
117 </ul>
118 </div>
119 </div>
120 </body>
121 </html>
122
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 <script type="text/javascript" src="../js/jquery.js"></script>
7 <script type="text/javascript">
8 $(document).ready(
9 function()
10 {
11 $(".menuTitle").click(function(){
12 $(this).next("div").slideToggle("slow").siblings(".menuContent:visible").slideUp("slow");
13 $(this).toggleClass("activeTitle");//如果当前div存在这个类名称，那么就删除否则就添加
14 $(this).siblings(".activeTitle").removeClass("activeTitle");
15 });
16 });
17
18 </script>
19 <style type="text/css">
20 body
21 {
22 margin:0;background-color:#9ad075;
23 }
24 .container
25 {
26 width:100%; text-align:center;
27 }
28 .menuTitle
29 {
30 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
31 }
32 .Title
33 {
34 width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
35 }
36 .activeTitle
37 {
38 width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
39 }
40 .menuContent
41 {
42 background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;margin-bottom:6px;
43 }
44 li
45 {
46 background:url(images/arr.gif) no-repeat 20px 6px ; border-bottom:dotted 1px #000000; list-style-type:none;padding:0px 0px 0px 38px; font-size:12.7px; height:20px; line-height:20px;
47 }
48 ul
49 {
50 margin:0;padding:0;margin-bottom:6px;
51 }
52 .menuContent ul li a{ text-decoration:none;}
53 </style>
54 </head>
55 <body>
56 <div class="container">
57 <div class="Title">我的商铺</div>
58 <div></div>
59 <div class="menuTitle">供应信息</div>
60 <div class="menuContent">
61 <ul>
62 <li><a href="javascript:void(0);">发布供应信息</a></li>
63 <li><a href="javascript:void(0);">管理供应信息</a></li>
64 <li><a href="javascript:void(0);">自定义分类</a></li>
65 </ul>
66 </div>
67 <div class="menuTitle">求购信息</div>
68 <div class="menuContent">
69 <ul>
70 <li><a href="javascript:void(0);">发布求购信息</a></li>
71 <li><a href="javascript:void(0);">管理求购信息</a></li>
72 <li><a href="javascript:void(0);">自定义分类</a></li>
73 </ul>
74 </div>
75 <div class="menuTitle">公司信息</div>
76 <div class="menuContent">
77 <ul>
78 <li><a href="javascript:void(0);">公司信息</a></li>
79 <li><a href="javascript:void(0);">证书上传</a></li>
80 <li><a href="javascript:void(0);">证书管理</a></li>
81 <li><a href="javascript:void(0);">相册上传</a></li>
82 <li><a href="javascript:void(0);">相册管理</a></li>
83 </ul>
84 </div>
85 <div class="menuTitle">留言管理</div>
86 <div class="menuContent">
87 <ul>
88 <li><a href="javascript:void(0);">收件箱</a></li>
89 <li><a href="javascript:void(0);">发件箱</a></li>
90 <li><a href="javascript:void(0);">收藏夹</a></li>
91 </ul>
92 </div>
93 <div class="menuTitle">会员管理</div>
94 <div class="menuContent">
95 <ul>
96 <li><a href="javascript:void(0);">修改资料</a></li>
97 <li><a href="javascript:void(0);">修改密码</a></li>
98 </ul>
99 </div>
100 <div class="menuTitle">以商会友</div>
101 <div class="menuContent">
102 <ul>
103 <li><a href="javascript:void(0);">进入论坛</a></li>
104 </ul>
105 </div>
106 <div class="menuTitle">在线帮助</div>
107 <div class="menuContent">
108 <ul>
109 <li><a href="javascript:void(0);">在线帮助</a></li>
110 <li><a href="javascript:void(0);">在线客服</a></li>
111 </ul>
112 </div>
113 <div class="menuTitle">系统信息</div>
114 <div class="menuContent">
115 <ul>
116 <li><a href="javascript:void(0);">安全退出</a></li>
117 </ul>
118 </div>
119 </div>
120 </body>
121 </html>
122
