下面是我以前积累的一个简单jquery写的手风琴效果 手风琴效果以前在淘宝网上有很多 但是现在不多见！就是和下面的一样 截图所示：
默认情况下就上面一样 鼠标点击或者移上去的时候 下拉出来 其实很简单！
下面是HTML/CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手风琴效果</title> <style> body,ul,div,li,dt,dd,dl{ margin:0; padding:0;} ul,li{ list-style:none;} .container{width:400px; overflow:hidden; margin:20px auto 0;} .dl-all{ width:400px; overflow:hidden;} .dt-title{width:400px; background:#73c5e5; height:30px; line-height:30px;margin-top:2px;} .dt-title a{ display:block; text-decoration:none; font-size:16px;} .list li{ width:398px; height:25px; overflow:hidden;} .dd-title{border: 1px solid #73C5E5; width:398px;} .hide{ display:none;} </style> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.5.2.min.js"></script> </head> <body> <div class="container"> <dl class="dl-all"> <dt class="dt-title"><a href="#">JQuery</a></dt> <dd class="dd-title"> <ul class="list"> <li><a href="#" target="_blank">11111</a></li> <li><a href="#" target="_blank">22222</a></li> <li><a href="#" target="_blank">33333</a></li> </ul> </dd> <dt class="dt-title"><a href="#">JavaScript</a></dt> <dd class="dd-title hide"> <ul class="list"> <li><a href="#" target="_blank">11111</a></li> <li><a href="#" target="_blank">22222</a></li> <li><a href="#" target="_blank">33333</a></li> </ul> </dd> <dt class="dt-title"><a href="#">YUI</a></dt> <dd class="dd-title hide"> <ul class="list"> <li><a href="#" target="_blank">11111</a></li> <li><a href="#" target="_blank">22222</a></li> <li><a href="#" target="_blank">33333</a></li> </ul> </dd> <dt class="dt-title"><a href="#">ExtJs</a></dt> <dd class="dd-title hide"> <ul class="list"> <li><a href="#" target="_blank">11111</a></li> <li><a href="#" target="_blank">22222</a></li> <li><a href="#" target="_blank">33333</a></li> </ul> </dd> </dl> </div>JS代码：
<script> $(function(){ $(".dd-title:not(:first)").hide(); $(".dd-title:first").show(); $(".dt-title a").click(function(){ $(".dd-title:visible").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; }) }) </script>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦