Jquery二级简单折叠菜单

浏览数：54 / 时间：2015年06月09日

写在前面：

1、前端新手

2、欢迎交流

效果图：

技术分享

代码部分：jquery部分：

<script>
$(function(){
    $("#1,#2").toggle(
      function(){
          var ss=$(this).attr("id");         
          $(this).children().parent().next().slideDown(1000);
          },
      function(){
          $(this).children().parent().next().hide(500);                  
          });    
});

  </script>

HTML部分：

 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=utf-8" />
 5 <title></title>
 6 <style>
 7 html{
 8     padding:0px;margin:0px;}
 9 body{
10     padding:0px;margin:0px;background-color:#f1f2f2;}
11 a{
12     text-decoration:none;}
13 a:hover{
14     text-decoration:none;
15     }
16 
17 #left{
18     float:left;width:210.4px; background-color:#1d6ab2;}
19 #main{
20     float:left;width:84.4%;position:absolute;left:210.4px;}
21 #left table{
22     margin-left:20px;margin-right:auto;margin-top:4px; text-align:left;}
23 #left table td{
24     color:#FFF;font-size:14px;font-family:宋体; font-weight:400;}
25 #left table td a{
26     color:#1d6ab2;font-size:12px;font-family:宋体; font-weight:400; background-color:#fff;
27     border-radius:4px;padding:5px;}
28 #left table td a:hover{
29     background-color:#1d6ab2;color:#FFF;
30     }
31 #left table td button{
32     background:#3f85c0;color:#fff;border:0px;padding:6px;border-radius:4px;font-size:12px;
33     }
34 #left table td button:hover{
35     background:#2e2d80;
36     }
37 #menu{
38     width:100%; margin-left:auto; margin-right:auto;margin-bottom:4px;}
39 #menu1,#menu2{
40      width:144px;display:none;margin-left:auto; margin-right:auto;clear:left;margin-bottom:3px;margin-top:3px;}
41 #menu button{
42     width:100%;height:30px;border:0px;margin:0px 0px 0px 0px; background-color:#1D6ab2;color:#FFF;
43     font-size:14px;font-family:宋体; font-weight:600;border-radius:1px; 
44     }
45 #menu button:hover{
46     background-color:#f1f2f2;color:#1D6ab2;
47     }
48 #menu1 a,#menu2 a{
49      font-size:14px;font-family:宋体; font-weight:600;padding:0px 50px 0px 50px;
50      background-color:#f1f2f2;color:#1D6ab2; text-align:center;}
51 #menu1 a:hover,#menu2 a:hover{
52     background-color:#AAD5E8;color:#1D6ab2;
53     }
54 
55 
56 </style>
57 <script src="js/jquery.min.js"></script>
58 
59 </head>
60 
61 <body>
62       <div id="left" >
63       <table>
64         <tr><td>用户名：</td><td>李丽</td></tr>
65         <tr><td>学&nbsp; 号：</td><td>12</td></tr>
66         <tr height="30px"><td ><a href="#">[修改资料]</a></td>
67                           <td><a href="#">[修改密码]</a></td></tr>
68         <tr ><td><button type="button">切换账户</button></td>
69              <td><button type="button">用户登录</button></td></tr>
70       </table>
71       <hr style="border:1px solid #f1f2f2;height:0px;">
72       
73       <div id="menu" >
74          <button type="button" id="1" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
75            <div id="menu1">
76              <a href="#">text2</a><br>
77              <a href="#">text2</a><br>
78              <a href="#">text2</a><br>
79              <a href="#">text2</a><br>
80            </div>
81          <button type="button" id="2">左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
82               <div id="menu2">
83              <a href="#">text2</a><br>
84              <a href="#">text2</a><br>
85              <a href="#">text2</a><br>
86              <a href="#">text2</a><br>
87            </div>
88          <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
89          <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
90          <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
91          <button type="button" >左边导航&nbsp;&nbsp;&nbsp;<span style="float:right;margin-right:74px;">></span></button>
92        </div>
93      
94       </div>
95 </body>
96 </html>