jquery实现左侧伸缩菜单
学习了哈伸缩菜单制作,没办法我是菜鸟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伸缩菜单</title> <style> body { font:16px "Microsoft YaHei",sans-serif; } ul { list-style: none; margin:0; padding : 0; display: none; } a { text-decoration: none; } .nav-list { wifth:220px; } .nav-list h3{ width:220px; margin:0; padding:10px 20px; font-size:16px; line-height: 20px; font-weight: normal; color: #fff; background-color: #333; border-top: 1px solid #ccc; cursor:pointer; } .nav-list ul li { width : 259px; } .nav-list h3 span { position : absolute; right: 20px; top:14px; width:12px; height:12px; background: url("zuo.png")no-repeat; } .nav-list h3.open span { background: url("shang.png")no-repeat; } .nav-list h3:hover { background-color: #222; } .nav-list li a { display: block; padding: 10px 20px; background-color: #f5f5f5; border:1px solid #ccc; border-bottom:none; color:#333; font-size:13px; } .nav-list li a:hover { background-color: #ccc; } </style> </head> <body> <div class="nav-list"> <h3>选择器 <span></span></h3> <ul> <li><a href="#">id选择器</a></li> <li><a href="#">标签选择器</a></li> <li><a href="#">类选择器</a></li> <li><a href="#">子类选择器</a></li> </ul> <h3>会员管理<span></span></h3> <ul> <li><a href="#">会员列表</a></li> <li><a href="#">会员添加</a></li> <li><a href="#">会员删除</a></li> </ul> <h3>权限管理<span></span></h3> <ul> <li><a href="#">权限添加</a></li> <li><a href="#">权限删除</a></li> <li><a href="#">角色列表</a></li> </ul> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.nav-list h3').click(function(){ $(this).toggleClass("open").next("ul").slideToggle(); //判断ul是隐藏还是显示 //第一种方法 // if($(this).next("ul").is(":visible")){ // $(this).next("ul").slideUp(); // }else{ // $(this).next("ul").slideDown(); // } //第二种方法 // $(this).next("ul").slideToggle(); //第三种 //$(this).toggleClass("open").next("ul").slideToggle(); }) }) </script> </body> </html>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
- 本文网址:https://www.liaotaoo.cn/250.html
- 上篇文章:jQuery手风琴菜单(改造版)
- 下篇文章:对短信验证码发送次数的限制,用PHP是如何实现