jQuery實(shí)現(xiàn)的簡單手風(fēng)琴效果示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡單手風(fēng)琴效果。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn jQuery手風(fēng)琴效果</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>游戲動(dòng)漫</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');//不是當(dāng)前點(diǎn)擊的內(nèi)容全部向上收起 $('.wrap>ul>li').children("span").not(icon).html("+"); return false; }) }) </script> </body> </html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試,運(yùn)行結(jié)果如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- 基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
- 基于jquery的slideDown和slideUp做手風(fēng)琴
- jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼
- jquery手風(fēng)琴特效插件
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- jquery超簡單實(shí)現(xiàn)手風(fēng)琴效果的方法
- jquery實(shí)現(xiàn)手風(fēng)琴展開效果
相關(guān)文章
jQuery EasyUI 為Combo,Combobox添加清除值功能的實(shí)例
下面小編就為大家?guī)硪黄猨Query EasyUI 為Combo,Combobox添加清除值功能的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04jQuery實(shí)現(xiàn)的簡單排序功能示例【冒泡排序】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單排序功能,結(jié)合實(shí)例形式分析了冒泡排序的原理及具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01不用錨點(diǎn)也可以平滑滾動(dòng)到頁面的指定位置實(shí)現(xiàn)代碼
在不適用錨點(diǎn)的情況下也可以平滑滾動(dòng)到頁面的指定位置,看樣子還不錯(cuò)嗎,具體處理程序如下,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05jquery使用on綁定a標(biāo)簽無效 只能用live解決
下面小編就為大家?guī)硪黄猨query使用on綁定a標(biāo)簽無效 只能用live解決。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開始的選定后,還可以通過一系列JQuery提供的方法對包裝集內(nèi)的元素進(jìn)行擴(kuò)充,修改,篩選,刪除find()方法 VS filter()方法2009-12-12運(yùn)用jquery實(shí)現(xiàn)table單雙行不同顯示并能單行選中
(該方法是對《運(yùn)用jquery實(shí)現(xiàn)(table)單雙行不同顯示并能多行選中》的改進(jìn),適合于單行選擇)2009-07-07解決html-jquery/js引用外部圖片時(shí)遇到看不了或出現(xiàn)403的問題
下面小編就為大家?guī)硪黄鉀Qhtml-jquery/js引用外部圖片時(shí)遇到看不了或出現(xiàn)403的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09jQuery 1.7.2中g(shù)etAll方法的疑惑分析
2012-05-05