今天看了下手风琴式下拉菜单，于是想自己做个出来，废话不多说先贴代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ list-style: none; } li{ height:40px; line-height: 40px; width: 150px; text-align: center; font-family: ‘微软雅黑‘; border-bottom: 1px solid #222; background-color: #eee; cursor: pointer; display: none; } .title { background-color: #888888; color: #fff; border-bottom: 1px solid #eeeeee; display: block; } .context{ height:120px ; width: 150px; } .context li { display: block; margin-left: -40px; } </style> </head> <body> <ul class="hole"> <li class="title">html5基础教程</li> <li class="context"> <ul> <li>html5基础教程01</li> <li>html5基础教程02</li> <li>html5基础教程03</li> </ul> </li> <li class="title">css3基础教程</li> <li class="context"> <ul> <li>css3基础教程01</li> <li>css3基础教程02</li> <li>css3基础教程03</li> </ul> </li> <li class="title">JS基础教程</li> <li class="context"> <ul> <li>JS基础教程01</li> <li>JS基础教程02</li> <li>JS基础教程03</li> </ul> </li> <li class="title">PHP基础教程</li> <li class="context"> <ul> <li>JS基础教程01</li> <li>JS基础教程02</li> <li>JS基础教程03</li> </ul> </li> <li class="title">IOS基础教程</li> <li class="context"> <ul> <li>IOS基础教程01</li> <li>IOS基础教程02</li> <li>IOS基础教程03</li> </ul> </li> </ul> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(".title").click( function(){ $(".context").not($(this).next()).slideUp(500); if($(this).next()[0].style.display=="list-item") { $(this).next().slideUp(500); } else{ $(this).next().slideDown(500); } } ) ; $(".context ul li").hover( function(){ $(this)[0].style.backgroundColor="#ccc" } , function(){ $(this)[0].style.backgroundColor="#eee" } ) </script> </body> </html>
通过用JQ中的slideDown和slideUp函数来达到动态切换的效果。也许有人会不懂其中的‘list-item’是干嘛的，其实‘list-item’就是让元素按照列表排列。
原文：http://www.cnblogs.com/txs836680030/p/3657728.html