jQuery實現(xiàn)的簡單手風琴效果示例
本文實例講述了jQuery實現(xiàn)的簡單手風琴效果。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn 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>營銷培訓(xùn)</h4> <span>+</span> <ul class="child-ul"> <li>seo</li> <li>微信營銷</li> <li>網(wǎng)絡(luò)創(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.jb51.net/code/HtmlJsRun測試,運行結(jié)果如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery EasyUI 為Combo,Combobox添加清除值功能的實例
下面小編就為大家?guī)硪黄猨Query EasyUI 為Combo,Combobox添加清除值功能的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開始的選定后,還可以通過一系列JQuery提供的方法對包裝集內(nèi)的元素進行擴充,修改,篩選,刪除find()方法 VS filter()方法2009-12-12運用jquery實現(xiàn)table單雙行不同顯示并能單行選中
(該方法是對《運用jquery實現(xiàn)(table)單雙行不同顯示并能多行選中》的改進,適合于單行選擇)2009-07-07解決html-jquery/js引用外部圖片時遇到看不了或出現(xiàn)403的問題
下面小編就為大家?guī)硪黄鉀Qhtml-jquery/js引用外部圖片時遇到看不了或出現(xiàn)403的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09jQuery 1.7.2中g(shù)etAll方法的疑惑分析
2012-05-05