左侧菜单栏折叠开展效果-超级简单
分享一个常见于管理后端的左侧菜单栏折叠开展的效果，基于jquery，效果图如下：
一：页面结构：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div class="menu-list"> <ul> <li class="first-menu"> <a href="javascript:;">首页</a> </li> <li class="first-menu"> <a href="javascript:;">菜单1</a> <ul> <li class="second-menu"> <a href="javascript:;">子菜单1-1</a> </li> <li class="second-menu"> <a href="javascript:;">子菜单1-2</a> </li> <li class="second-menu"> <a href="javascript:;">子菜单1-3</a> </li> <li class="second-menu"> <a href="javascript:;">子菜单1-4</a> </li> </ul> </li> <li class="first-menu"> <a href="javascript:;">菜单2</a> <ul> <li class="second-menu"> <a href="javascript:;">子菜单2-1</a> </li> <li class="second-menu"> <a href="javascript:;">子菜单2-2</a> </li> <li class="second-menu"> <a href="javascript:;">子菜单2-3</a> </li> </ul> </li> <li class="first-menu"> <a href="javascript:;">菜单3</a> <ul> <li class="second-menu"> <a href="javascript:;">子菜单3-1</a> </li> <li class="second-menu"> <a href="javascript:;">子菜单3-2</a> </li> </ul> </li> </ul></div></body></html>二：页面样式css，放在head标签里
<style> *{ margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; } html,body{ height: 100%; } .menu-list{ height: 100%; padding-top:20px; font-size:18px; background-color: #2e3254; } .menu-list ul{ list-style: none; padding:0; margin:0 auto; } .menu-list ul li{ text-align:left; color: #616c82; } .menu-list ul li.first-menu{ overflow: hidden; } .menu-list ul li:HOVER>a{ color: #007FC8; } .menu-list ul li a{ display:block; padding:16px 0; color: #5f78a2; text-decoration:none; } .menu-list ul li.first-menu>a{ padding-left: 15px; } .menu-list ul li.first-menu.active>a{ color: #1c9dff; vertical-align: middle; } .menu-list ul li.first-menu.active ul li.second-menu.current a{ background-color: #4d527c; font-size: 18px; } .menu-list ul li.first-menu ul{ display:none; } .menu-list ul li.first-menu ul li.second-menu a{ padding: 12px 0 12px 31px; font-size:16px; color: #8aa3cd; } </style>三：引入jquery文件
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>四：给一级菜单绑定点击事件，点击时开展下面的子菜单
$(".menu-list .first-menu").click(function(){ $(this).addClass("active").siblings().removeClass("active"); $(this).find("ul").slideToggle(500); $(this).siblings().find("ul").hide(); })五：给二级菜单绑定事件，点击时加当选中的深色背景
$(".menu-list .second-menu").click(function(){ var $this = $(this); $(".second-menu").each(function () { if($(this).hasClass("current")){ $(this).removeClass("current"); } }) $this.addClass("current").siblings().removeClass("current"); })六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因而需要阻止事件冒泡
// 阻止事件冒泡 $(".menu-list .first-menu ul").bind("click",function(event){ event.stopPropagation(); });
原文作者技术博客：https://www.songma.com/u/ac4daaeecdfe
95后前台妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 左侧菜单栏折叠开展效果-超级简单
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 左侧菜单栏折叠开展效果-超级简单
