首页 > 代码库 > 7菜单收缩展开
7菜单收缩展开
1 <!DOCTYPE html> 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 type="text/css"> 7 * { 8 font-family: 微软雅黑; 9 }10 11 #leftMenu {12 border: 1px solid #000;13 width: 260px;14 }15 16 #leftMenu .menu {17 padding: 0px;18 margin: 0px;19 }20 21 #leftMenu .menu .tit {22 background-color: #0094ff;23 color: #fff;24 padding: 5px 20px;25 text-align: center;26 }27 </style>28 <script src=http://www.mamicode.com/"Scripts/jquery-1.8.2.min.js"></script>29 <script type="text/javascript">30 $(function () {31 $(".tit").click(function () {32 //slideDown展开33 //slideUp 收缩34 // $(this).next().slideToggle();35 $(this).next().slideDown().parent().siblings().children(".content").slideUp();//36 });37 });38 </script>39 </head>40 <body>41 <div id="leftMenu">42 <ul class="menu">43 <li class="tit">系统管理</li>44 <li class="content">45 <ul>46 <li content="广州小蛮腰1">广州小蛮腰1</li>47 <li content="广州小蛮腰2">广州小蛮腰2</li>48 <li content="广州小蛮腰3">广州小蛮腰3</li>49 <li content="广州小蛮腰4">广州小蛮腰4</li>50 <li content="广州小蛮腰5">广州小蛮腰5</li>51 </ul>52 </li>53 54 </ul>55 56 57 <ul class="menu">58 <li class="tit">用户管理</li>59 <li class="content">60 <ul>61 <li content="广州小蛮腰1">广州小蛮腰1</li>62 <li content="广州小蛮腰2">广州小蛮腰2</li>63 <li content="广州小蛮腰3">广州小蛮腰3</li>64 <li content="广州小蛮腰4">广州小蛮腰4</li>65 <li content="广州小蛮腰5">广州小蛮腰5</li>66 </ul>67 </li>68 69 </ul>70 </div>71 </body>72 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。