jquery 手风琴展开收缩
jquery操作的是dom节点，获取节点状态，进而改变状态。
一。html文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery手风琴效果</title> <link href="css/jquery选项手风琴效果bg-svg.css" type="text/css" rel="stylesheet"> <link href="css/iconfont.css" type="text/html" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jquery选项手风琴效果.js"></script> </head> <body> <div class="toggle-test"> <ul class="toggle-left"> <li class="toggle-choice"> <div class=""><span class="iconfont iconfont20p"></span><strong>管理系统</strong><em class="iconfont"></em></div> <ul class="toggle-menu "> <li><span class="iconfont"></span><a>权限管理</a></li> <li><span class="iconfont"></span><a>柜员管理</a></li> <li><span class="iconfont"></span><a>车辆管理</a></li> <li><span class="iconfont"></span><a>车行管理</a></li> <li><span class="iconfont"></span><a>师傅管理</a></li> <li><span class="iconfont"></span><a>保险公司管理</a></li> </ul> </li> <li class="toggle-choice"> <div class=""><span class="iconfont iconfont20p"></span><strong>管理系统</strong><em class="iconfont"></em></div> <ul class="toggle-menu"> <li><span class="iconfont"></span><a>权限管理</a></li> <li><span class="iconfont"></span><a>柜员管理</a></li> <li><span class="iconfont"></span><a>车辆管理</a></li> <li><span class="iconfont"></span><a>车行管理</a></li> <li><span class="iconfont"></span><a>师傅管理</a></li> <li><span class="iconfont"></span><a>保险公司管理</a></li> </ul> </li> <li class="toggle-choice"> <div class=""><span class="iconfont iconfont20p"></span><strong>管理系统</strong><em class="iconfont"></em></div> <ul class="toggle-menu"> <li><span class="iconfont"></span><a>权限管理</a></li> <li><span class="iconfont"></span><a>柜员管理</a></li> <li><span class="iconfont"></span><a>车辆管理</a></li> <li><span class="iconfont"></span><a>车行管理</a></li> <li><span class="iconfont"></span><a>师傅管理</a></li> <li><span class="iconfont"></span><a>保险公司管理</a></li> </ul> </li> <li class="toggle-choice"> <div class=""><span class="iconfont iconfont20p"></span><strong>管理系统</strong><em class="iconfont"></em></div> <ul class="toggle-menu"> <li><span class="iconfont"></span><a>权限管理</a></li> <li><span class="iconfont"></span><a>柜员管理</a></li> <li><span class="iconfont"></span><a>车辆管理</a></li> <li><span class="iconfont"></span><a>车行管理</a></li> <li><span class="iconfont"></span><a>师傅管理</a></li> <li><span class="iconfont"></span><a>保险公司管理</a></li> </ul> </li> <li class="toggle-choice"> <div class=""><span class="iconfont iconfont20p"></span><strong>管理系统</strong><em class="iconfont"></em></div> <ul class="toggle-menu"> <li><span class="iconfont"></span><a>权限管理</a></li> <li><span class="iconfont"></span><a>柜员管理</a></li> <li><span class="iconfont"></span><a>车辆管理</a></li> <li><span class="iconfont"></span><a>车行管理</a></li> <li><span class="iconfont"></span><a>师傅管理</a></li> <li><span class="iconfont"></span><a>保险公司管理</a></li> </ul> </li> <li class="toggle-choice"> <div class=""><span class="iconfont iconfont20p"></span><strong>管理系统</strong><em class="iconfont"></em></div> <ul class="toggle-menu"> <li><span class="iconfont"></span><a>权限管理</a></li> <li><span class="iconfont"></span><a>柜员管理</a></li> <li><span class="iconfont"></span><a>车辆管理</a></li> <li><span class="iconfont"></span><a>车行管理</a></li> <li><span class="iconfont"></span><a>师傅管理</a></li> <li><span class="iconfont"></span><a>保险公司管理</a></li> </ul> </li> </ul> </div> </body> </html>
二。css文档
body ul li{ list-style: none; } .toggle-test{ margin:0px; padding: 0px; margin-top:50px; box-sizing: border-box; font-family: '微软雅黑', Arial; letter-spacing:1px; } .toggle-left{ width:250px; margin:0px auto; background-color:#3a3633; color: #bbbab8; padding-left:0px; } .toggle-left li div{ height:45px; line-height:40px; position:relative; } .toggle-left li div span{ margin-left:10px; margin-right:10px; } .toggle-left li div em{ font-weight: normal; display:inline-block; position:absolute; right:20px; top:2px; } .toggle-left li div:hover{ color: #ffffff; } .toggle-menu{ background-color: #403f3d; padding-top:8px; padding-bottom:8px; position:relative; display: none; } .toggle-menu:before{ content: ''; position:absolute; top:0px; bottom:0px; left:25px; border-left:1px solid #7c7b79; } .toggle-menu li{ padding-top:8px; padding-bottom:8px; position:relative; } .toggle-menu li:before{ content: ''; width:11px; height:1px; background: #7c7b79; position:absolute; left:-13px; top:20px; } .toggle-menu li span{ margin-right:5px; } .toggle-menu li:hover{ color: #ffffff; background-color:#353431 ; } /*svg相关*/ .iconfont20p{ font-size:22px!important; }
三。JS文档
/** * Created by Lenvovo on 2016/3/3. */ $(document).ready(function(){ targetLayer = $(".toggle-choice div em"); targetLayer.click(function(){ if($(this).parent().next().is(":hidden")){ $(this).html(''); } else{ $(this).html(''); } $(this).parent().next().slideToggle(); targetLayer.not(this).html(''); targetLayer.not(this).parent().next().slideUp(); }); });
四。效果展示
有两个效果，1点击当前“+”号按钮，内容展开，“+”号变“—”号，继续点击重复内容展开收缩，加号减号变换。
2点击当前“+”号，内容展开之后，继续点击其他的“+”号，会收缩已点击的内容。
五。注意事项
svg是在阿里巴巴iconfont下载的，具体使用方法请见该网页。在本地使用务必导入
这四个文件。
alert("hello world");
