公司项目需要写一个左侧导航菜单，在网上找了好多源码参考，处理的都很复杂，移植性不是很好，最后根据一个比较不错的修改了一下达到了想要的效果。
前端HTML代码：
View Code
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4 <title>jquery左侧导航网页菜单</title>
5 <link rel="stylesheet" type="text/css" href="css/css.css" />
6 <script type="text/javascript" src="js/jquery.min.js"></script>
7 <script type="text/javascript">
8 $(document).ready(function () {
9 $('li.button a').click(function (e) {
10 var dropDown = $(this).parent().next();
11 $('.dropdown').not(dropDown).slideUp('slow');
12 dropDown.slideToggle('slow');
13 e.preventDefault();
14 })
15
16 });
17 </script>
18 </head>
19 <body style="text-align: center">
20 <div id="main">
21 <ul class="">
22 <li class="menu">
23 <ul>
24 <li class="button"><a href="#" class="green">菜单一<span></span></a></li>
25 <li class="dropdown">
26 <ul>
27 <li><a href="#">链接一</a></li>
28 <li><a href="#">链接二</a></li>
29 <li><a href="#">链接三</a></li>
30 <li><a href="#">链接四</a></li>
31 </ul>
32 </li>
33 </ul>
34 </li>
35 <li class="menu">
36 <ul>
37 <li class="button"><a href="#" class="orange">菜单二<span></span></a></li>
38 <li class="dropdown">
39 <ul>
40 <li><a href="#">链接一</a></li>
41 <li><a href="#">链接二</a></li>
42 <li><a href="#">链接三</a></li>
43 </ul>
44 </li>
45 </ul>
46 </li>
47 <li class="menu">
48 <ul>
49 <li class="button"><a href="#" class="blue">菜单三<span></span></a></li>
50 <li class="dropdown">
51 <ul>
52 <li><a href="#">链接一</a></li>
53 <li><a href="#">链接二</a></li>
54 <li><a href="#">链接三</a></li>
55 <li><a href="#">链接四</a></li>
56 </ul>
57 </li>
58 </ul>
59 </li>
60 </ul>
61 <div class="clear">
62 </div>
63 </div>
64 </body>
65 </html>最后展示下我实现的效果：
源代码：Jquery实现竖导航网页菜单
转载于:https://my.oschina.net/weisenz/blog/200631