今天我用jquary來寫一下手風琴案例，這個案例在平時的項目中很經常會見到，要想實現效果用jquary來寫其實很簡單，其實一句話就是jquary的方法的調用。

首先我們先來分析一下手風琴案例實際實現的效果，就是點擊當前的標題，它下面的盒子顯示出來，而其他的盒子是閉合的狀態。

一、先簡單的來寫下布局：

1 這是html的布局，我用ul和li來實現 2 <ul> 3 <li> 4 <a class="title" href="javascript:void(0)">標題一</a> 5 <div>content1</div> 6 </li> 7 <li> 8 <a class="title" href="javascript:void(0)">標題二</a> 9 <div>content2</div> 10 </li> 11 <li> 12 <a class="title" href="javascript:void(0)">標題三</a> 13 <div>content3</div> 14 </li> 15 </ul>

當然也可以用div來實現，用ul和li在語法上來講的話，我個人感覺更有語義。接下來我簡單寫一下css樣式

1 這是簡單的css效果 2 <style> 3 *{margin: 0;padding:0;} 4 ul,li{list-style: none;width:300px;border:1px solid #e5e5e5;border-top:none;} 5 a{ text-decoration: none;} 6 ul li div{width:300px;height:300px;display: none;} 7 .title{display: block;width:300px;height:45px;border: 1px solid #e5e5e5;line-height: 45px;text-align: center;} 8 </style>

其實css是可以優化的，但是這里我就不寫那么多了。來看看寫完布局樣式之后的截圖：

接下來就是我今天寫這個手風琴案例的重點了，也是這些jquary代碼來實現了頁面上的渲染效果。當然，話說回來，既然用jquary來寫那就一定要引用jquary插件，我目前引用的是jquery-1.12.3版本的，相對而言是比較新的了，當然也可以到jquary官網上下載最新的版本，好的話不多少，來看jquary代碼：

1 <script> 2 $(function(){ 3 //思路分析 4 //1.給所有的a標簽注冊點擊時間 5 //2.然后點擊a的時候，希望他的兄弟div能夠顯示出來，然后其他的a下的div不要顯示 6 $(".title").click(function(){ 　　
　　　　　　　　$(this).next().slideDown().parent().siblings().children("div").slideUp(); 7 }) 8 //這里的next()方法等同于js中的nextElementSibling，因為這里是jquary對象 ，所以要用相對的jquary方法 9 　 10 }) 11 </script>

?

?這樣就算是寫完了，我截圖給大家看看具體的樣子：

通過這個案例，可以得出用jquary來寫一些渲染效果其實比js更見的簡練，我寫這個的目的也是希望初學者可以很清楚的了解整體的步驟，當然我也算是又復習了jquary，我覺得學習是一個不斷堅持的一個過程，哪怕沒時間一周一個小案例的來學，我相信終有一日是可以幫助到我們的，所以趁現在，努力，未來不后悔！和我有同樣感受的小伙伴們，加油！

轉載于:https://www.cnblogs.com/web001/p/7500958.html

總結

以上是生活随笔為你收集整理的手风琴案例jquery写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。