jqury 实现点击一个菜单,其他展开的子菜单隐藏
2016-12-08 17:41
351 查看
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").h a764 ide(1000); die.next("ul").show(1000); }else{ die.next("ul").hide(1000); } }) }) </script>
应用到自己的项目中,考script部分,套入js代码中,这边注意下的是 script 代码中的nex 是jqury中的遍历知识 , 这边是同胞中的下一个标签, 你用的是ul li 结构, 要用到后代的代码, 可以去w3 去找相应的知识学习。
相关文章推荐
- jquery 点击页面其他地方实现隐藏菜单功能
- jquery实现点击展开列表同时隐藏其他列表
- listview实现点击条目上的箭头展开隐藏菜单。
- jquery实现点击展开列表同时隐藏其他列表
- angularjs实现任意点击一个标签,指定的标签展开,其他的标签闭合
- jQuery 实现点击页面其他地方隐藏菜单
- jquery 点击页面其他地方实现隐藏菜单功能
- jQuery 怎么实现点击页面其他地方隐藏菜单?
- jQuery 怎么实现点击页面其他地方隐藏菜单? 做了个按钮点击时弹出菜单,想实现点击其他地方时隐藏弹出的菜单
- JS如何实现点击页面其他地方隐藏菜单?
- Jquery实现点击展开隐藏效果
- jQuery实现点击展开其他自动关闭
- jquery实现点击页面空白隐藏指定菜单
- js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- jQuery实现菜单点击隐藏(上下左右)
- android中ExpandableListView点击哪一条那一条显示,而其他条隐藏的实现办法
- C# winform datagridview中如何实现鼠标右键点击一行数据出现一个带有删除的菜单,并能执行删除操作?
- 使用jquery实现点击一个按钮或连接,让它下面的div显示,在点击一下隐藏
- jQuery实现点击展开div,再点击div隐藏