jqury 实现点击一个菜单，另一个展开的子菜单隐藏
1，加载jqury.js 到相应的页面中
2. css走一波
<style>
*{margin:0px;padding:0px;}
body{background:#cccccc;}
ul{display: none;}
.menu div{ height:35px; line-height:35px; background:#99CC33; border-bottom:1px solid #333333; text-align:center; cursor:pointer; }
ul{height:auto;margin:1px auto;background: #99CCCC;text-align:center;}ul li{width:220px;height:30px;line-height:30px;text-align:center; }
ul li:hover{background:#ccff33;}
ul li a{text-decoration:none;}
</style>
3.body走一波
- <body><div class="menu"> <div>网站管理</div><ul class="test"><li><a href="siteInfo.php" target="main">网站基本信息</a></li><li><a href="updateSite.php" target="main">网站配置</a></li></ul><div>权限管理</div><ul><li><a href="userGroupList.php" target="main">用户组列表</a></li><li><a href="usersPower.php" target="main">用户权限列表</a></li></ul><div>用户管理</div><ul><li><a href="userList.php" target="main">用户列表</a></li><li><a href="addUser.php" target="main">添加用户</a></li> </ul> </div></body>
4.做完上面的3步，少年你离成功还有1%，加入最重要的js代码：
- <script>$(function(){var dv=$(".menu div");dv.click(function(){var die=$(this);if(die.next("ul").is(":hidden")){ $("ul").hide(1000); die.next("ul").show(1000); }else{die.next("ul").hide(1000);}})})</script>
川公网安备 51010702002669号
18605917465
客服QQ