今天我用jquary來寫一下手風(fēng)琴案例，這個(gè)案例在平時(shí)的項(xiàng)目中很經(jīng)常會(huì)見到，要想實(shí)現(xiàn)效果用jquary來寫其實(shí)很簡(jiǎn)單，其實(shí)一句話就是jquary的方法的調(diào)用。

首先我們先來分析一下手風(fēng)琴案例實(shí)際實(shí)現(xiàn)的效果，就是點(diǎn)擊當(dāng)前的標(biāo)題，它下面的盒子顯示出來，而其他的盒子是閉合的狀態(tài)。

一、先簡(jiǎn)單的來寫下布局：

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

當(dāng)然也可以用div來實(shí)現(xiàn)，用ul和li在語法上來講的話，我個(gè)人感覺更有語義。接下來我簡(jiǎn)單寫一下css樣式

1 這是簡(jiǎn)單的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>

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

接下來就是我今天寫這個(gè)手風(fēng)琴案例的重點(diǎn)了，也是這些jquary代碼來實(shí)現(xiàn)了頁面上的渲染效果。當(dāng)然，話說回來，既然用jquary來寫那就一定要引用jquary插件，我目前引用的是jquery-1.12.3版本的，相對(duì)而言是比較新的了，當(dāng)然也可以到j(luò)quary官網(wǎng)上下載最新的版本，好的話不多少，來看jquary代碼：

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

?

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/web001/p/7500958.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。