jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能完整實(shí)例
本文實(shí)例講述了jQuery僅用3行代碼實(shí)現(xiàn)的顯示與隱藏功能。分享給大家供大家參考。具體如下:
jQuery技術(shù)相當(dāng)好使用,的確可以用很少的代碼實(shí)現(xiàn)想要的功能,比如這款經(jīng)常用到的“顯示”與“隱藏”的功能,只需要3行代碼就實(shí)現(xiàn)了,確實(shí)夠給力。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/
具體代碼如下:
<!doctype html> <html> <head> <meta charset="gbk" /> <title>3行代碼實(shí)現(xiàn)顯示與隱藏</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style> .showmore{ float:left;} .cont .aa { height: auto; width: 400px; border: 1px solid #000000; margin-bottom: 10px; padding-right: 10px; padding-left: 10px; float: left; } .cont .aa .a1 { float: left; height: 30px; width: 300px; } .cont .aa .a2 { height: 30px; width: 350px; float: left; display:none; } </style> </head> <body> <div class="cont"> <div class="aa"> <div class="a1">tab1</div> <div class="showmore"><a href="#"><span>顯示</span></a></div> <div class="a2">詳細(xì)說明:今天你要嫁給我嘛~</div> </div> <div class="aa"> <div class="a1">tab2</div> <div class="showmore" ><a href="#"><span>顯示</span></a></div> <div class="a2">詳細(xì)說明:北京、上海四日游</div> </div> <div class="aa"> <div class="a1">tab3</div> <div class="showmore" ><a href="#"><span>顯示</span></a></div> <div class="a2">詳細(xì)說明:河南是華夏文明的根源</div> </div> </div> <script> $(".showmore a span").mouseover(function(e){ $(this).html(["顯示", "隱藏"][this.hutia^=1]); $(this.parentNode.parentNode).next().toggle(); e.preventDefault(); }); </script> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- 使用jquery+CSS3實(shí)現(xiàn)仿windows10開始菜單的下拉導(dǎo)航菜單特效
- jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
- 程序員必知35個(gè)jQuery 代碼片段
- jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯(cuò)誤的解決辦法
- 解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯(cuò)誤的方法
- 基于jQuery和CSS3制作響應(yīng)式水平時(shí)間軸附源碼下載
- jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果
- jQuery 3.0 的變化及使用方法
- 酷炫jQuery全屏3D焦點(diǎn)圖動(dòng)畫效果
- 即將發(fā)布的jQuery 3 有哪些新特性
相關(guān)文章
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val)
jquery 學(xué)習(xí)之二 屬性 文本與值(text,val),學(xué)習(xí)jquery的朋友可以參考下。2010-11-11關(guān)于jQuery EasyUI 中刷新Tab選項(xiàng)卡后一個(gè)頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項(xiàng)卡后一個(gè)頁面變形的解決方法,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果
當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí),會(huì)彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對(duì)文件的上傳的方法和實(shí)例,非常的實(shí)用,有需要的小伙伴可以參考下。2015-06-06根據(jù)Bootstrap Paginator改寫的js分頁插件
本文主要對(duì)根據(jù)Bootstrap Paginator改寫的js插件進(jìn)行詳細(xì)介紹,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12jQuery實(shí)現(xiàn)倒計(jì)時(shí)(倒計(jì)時(shí)年月日可自己輸入)
本篇文章主要對(duì)jQuery實(shí)現(xiàn)倒計(jì)時(shí)進(jìn)行了實(shí)例分析。并附上實(shí)例源碼,有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看,希望對(duì)大家有所幫助2016-12-12jQuery一鍵移除使前端項(xiàng)目脫離對(duì)它的依賴
這篇文章主要為大家介紹了jQuery一鍵移除使項(xiàng)目脫離對(duì)它的依賴使用方式,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04基于DOM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)硪黄贒OM節(jié)點(diǎn)刪除之empty和remove的區(qū)別(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09