本文實例講述了jQuery實現(xiàn)的簡單手風琴效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>m.survivalescaperooms.com jQuery手風琴效果</title> <style> .wrap{ width: 200px;height: auto;margin:50px auto;border-radius: 5px } ul,li,h4{list-style: none;margin: 0;padding: 0} .wrap>ul{border-radius: 5px } .wrap>ul>li{background: #E4644B;text-align: center;border-bottom: solid 1px #DED1D1;color:#fff;cursor: pointer;position: relative;} .wrap>ul>li:last-child{border-bottom: none;} .wrap>ul>li h4{padding:8px 0;} .wrap>ul li span{position: absolute;top: 5px;right: 12px;font-size: 22px;color: #fff;display: inline-block;} .wrap>ul>li .child-ul{background: #fff;display: none; } .wrap>ul>li .child-ul li{color: #000;line-height: 40px;} </style></head><body> <div class="wrap"> <ul class="menu"> <li> <h4>軟件jiaoxue</h4> <span>+</span> <ul class="child-ul"> <li>java</li> <li>web前端</li> <li>安卓開發(fā)</li> <li>軟件測試</li> </ul> </li> <li> <h4>游戲動漫</h4> <span>+</span> <ul class="child-ul"> <li>java</li> <li>web前端</li> <li>安卓開發(fā)</li> <li>軟件測試</li> </ul> </li> <li> <h4>電商企業(yè)</h4> <span>+</span> <ul class="child-ul"> <li>淘寶</li> <li>天貓</li> <li>京東</li> <li>蘇寧易購</li> </ul> </li> <li> <h4>營銷培訓</h4> <span>+</span> <ul class="child-ul"> <li>seo</li> <li>微信營銷</li> <li>網(wǎng)絡創(chuàng)業(yè)</li> <li>市場營銷</li> </ul> </li> </ul> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".wrap>ul>li").on("click",function(){ var next = $(this).children(".child-ul"); var icon = $(this).children("span"); next.slideToggle('fade'); if(icon.html()==="+"){ icon.html("-"); }else{ icon.html("+"); } $('.child-ul').not(next).slideUp('fast');//不是當前點擊的內(nèi)容全部向上收起 $('.wrap>ul>li').children("span").not(icon).html("+"); return false; }) }) </script></body></html>使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試，運行結(jié)果如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
