Jquery手風琴效果

下面是我以前積累的一個簡單jquery寫的手風琴效果 手風琴效果以前在淘寶網上有很多 但是現在不多見！就是和下面的一樣 截圖所示：

<a target="_blank" href="http://blog.51cto.com/attachment/201111/230358749.jpg"></a>

預設情況下就上面一樣 滑鼠點選或者移上去的時候 下拉出來 其實很簡單！

下面是HTML/CSS代碼

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 

&lt;head&gt; 

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 

&lt;title&gt;手風琴效果&lt;/title&gt; 

&lt;style&gt; 

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;}  

&lt;/style&gt; 

&lt;script src="jquery-1.5.2.min.js"&gt;&lt;/script&gt; 

&lt;/head&gt; 

&lt;body&gt; 

    &lt;div class="container"&gt; 

        &lt;dl class="dl-all"&gt; 

            &lt;dt class="dt-title"&gt;&lt;a href="#"&gt;JQuery&lt;/a&gt;&lt;/dt&gt; 

            &lt;dd class="dd-title"&gt; 

                &lt;ul class="list"&gt; 

                    &lt;li&gt;&lt;a href="#" target="_blank"&gt;11111&lt;/a&gt;&lt;/li&gt; 

                    &lt;li&gt;&lt;a href="#" target="_blank"&gt;22222&lt;/a&gt;&lt;/li&gt; 

                    &lt;li&gt;&lt;a href="#" target="_blank"&gt;33333&lt;/a&gt;&lt;/li&gt; 

                &lt;/ul&gt; 

            &lt;/dd&gt; 

            &lt;dt class="dt-title"&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/dt&gt; 

            &lt;dd class="dd-title hide"&gt; 

            &lt;dt class="dt-title"&gt;&lt;a href="#"&gt;YUI&lt;/a&gt;&lt;/dt&gt; 

            &lt;dt class="dt-title"&gt;&lt;a href="#"&gt;ExtJs&lt;/a&gt;&lt;/dt&gt; 

        &lt;/dl&gt; 

    &lt;/div&gt; 

JS代碼：

&lt;script&gt;  

    $(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;  

        })  

    })  

&lt;/script&gt; 

<a href="http://down.51cto.com/data/2359370" target="_blank">附件：http://down.51cto.com/data/2359370</a>

本文轉自 塗根華 51CTO部落格，原文連結：http://blog.51cto.com/tugenhua/727324，如需轉載請自行聯系原作者