代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html, body { height: 100%; width: 100%; } * { margin: 0; padding: 0; cursor: default; } ul, li { list-style: none; position: relative; } a { text-decoration: none; color: #FFFFFF; } li { min-height: 40px; } #nav { background-color: #000000; width: 210px; height: 100%; color: #FFFFFF; } #nav>ul>li { text-align: center; transition: 300ms; } #nav .tow { display: none; background-color: #666; } #nav a { display: inline-block; height: 40px; line-height: 40px; width: 100%; border-left: 4px solid transparent; box-sizing: border-box; transition: 200ms; /* display: block; */ } #nav>.one a:hover { background-color: #00CED1 !important; border-left: 4px solid #006400 !important; } </style> </head> <body> <div id="nav"> <ul class="one"> <li> <a href="javascript:void(0)">一级列表</a> <ul class="tow"> <li> <a href="javascript:void(0)">二级列表</a> </li> </ul> </li> <li> <a href="javascript:void(0)">一级列表</a> <ul class="tow"> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> </ul> </li> <li> <a href="javascript:void(0)">一级列表</a> <ul class="tow"> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> </ul> </li> <li> <a href="javascript:void(0)">一级列表</a> <ul class="tow"> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> </ul> </li> <li> <a href="javascript:void(0)">一级列表</a> <ul class="tow"> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> </ul> </li> <li> <a href="javascript:void(0)">一级列表</a> <ul class="tow"> <li> <a href="javascript:void(0)">二级列表</a> </li> <li> <a href="javascript:void(0)">二级列表</a> </li> </ul> </li> </ul> </div> <script src="../jQeruy/js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var time = 300; //一级菜单的点击事件 $("#nav .one>li>a").click(function() { //如果自己的下一个兄弟元素ul是隐藏的就把所有的二级菜单都收起来再把自己的二级菜单展开 if($(this).next("ul").css(‘display‘)===‘none‘){ $("#nav .tow").slideUp(time);//收起所有二级菜单 $(this).next("ul").slideDown(time);//展开自己的二级菜单 }else{ $(this).next("ul").slideUp(time);//收起自己的二级菜单 } //以下代码改变边框与背景颜色 $("#nav .one>li>a").css({ ‘background-color‘: ‘transparent‘, ‘border-left‘: ‘4px solid transparent‘ }); $(this).css({ ‘background-color‘: ‘#00CED1‘, ‘border-left‘: ‘4px solid #006400‘ }); }) </script> </body> </html>
效果：
原文：https://www.cnblogs.com/hxw6/p/11134013.html