Jquery手风琴效果-原创手记-慕课网

下面是我以前积累的一个简单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 src="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>