1、新建html文档。
2、添加jquery-1.11.1.min.js包引用，并书老揉孟阼写js特效。<script type="te旌忭檀挢xt/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.inactive').click(function(){ if($(this).siblings('ul').css('display')=='none'){ $(this).parent('li').siblings('li').removeClass('inactives'); $(this).addClass('inactives'); $(this).siblings('ul').slideDown(100).children('li'); if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){ $(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives'); $(this).parents('li').siblings('li').children('ul').slideUp(100); } }else{ //控制自身变成+ $(this).removeClass('inactives'); //控制自身菜单下子菜单隐藏 $(this).siblings('ul').slideUp(100); //控制自身子菜单变成+ $(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives'); //控制自身菜单下子菜单隐藏 $(this).siblings('ul').children('li').children('ul').slideUp(100); //控制同级菜单只保持一个是展开的（-显示） $(this).siblings('ul').children('li').children('a').removeClass('inactives'); } }) }); </script>
3、书写html代艨位雅剖码。<div class="list"> <u造婷用痃l class="yiji"> <li><a href="#">百度经验</a></li> <li><a href="#" class="inactive">百度经验</a> <ul > <li><a href="#" class="inactive active">百度经验</a> <ul> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> </ul> </li> <li class="last"><a href="#">百度经验</a></li> </ul> </li> <li><a href="#" class="inactive">百度经验</a> <ul style="display: none"> <li><a href="#" class="inactive active">百度经验</a> <ul> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> </ul> </li> <li><a href="#" class="inactive active">百度经验</a> <ul> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> <li><a href="#">百度经验</a></li> </ul> </li> <li class="last"><a href="#">百度经验</a></li> </ul> </li> </ul> </div>
4、书写css样式。<style type="text/css"> *{margin: 0;padding: 0} body{font-size: 12px;font-family: "宋体","微软雅黑";} ul,li{list-style: none;} a:link,a:visited{text-decoration: none;color: #fff;} .list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;} .list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;} .list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative; } .list ul li .inactive{ background:url(http://www.xwcms.net/webAnnexImages/fileAnnex/201605/58780/images/off.png) no-repeat 184px center;} .list ul li .inactives{background:url(http://www.xwcms.net/webAnnexImages/fileAnnex/201605/58780/images/on.png) no-repeat 184px center;} .list ul li ul{display: none;} .list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;} .list ul li ul li ul{display: none;} .list ul li ul li a{ padding-left:20px;} .list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; } .last{ background-color:#d6e6f1; border-color:#6196bb; } .list ul li ul li ul li a{ color:#316a91; padding-left:30px;} </style>
5、查看效果。
