jQuery僅用3行代碼實現(xiàn)的顯示與隱藏功能完整實例
本文實例講述了jQuery僅用3行代碼實現(xiàn)的顯示與隱藏功能。分享給大家供大家參考。具體如下:
jQuery技術(shù)相當好使用,的確可以用很少的代碼實現(xiàn)想要的功能,比如這款經(jīng)常用到的“顯示”與“隱藏”的功能,只需要3行代碼就實現(xiàn)了,確實夠給力。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/
具體代碼如下:
<!doctype html> <html> <head> <meta charset="gbk" /> <title>3行代碼實現(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">詳細說明:今天你要嫁給我嘛~</div> </div> <div class="aa"> <div class="a1">tab2</div> <div class="showmore" ><a href="#"><span>顯示</span></a></div> <div class="a2">詳細說明:北京、上海四日游</div> </div> <div class="aa"> <div class="a1">tab3</div> <div class="showmore" ><a href="#"><span>顯示</span></a></div> <div class="a2">詳細說明:河南是華夏文明的根源</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>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
- 使用jquery+CSS3實現(xiàn)仿windows10開始菜單的下拉導航菜單特效
- jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
- 程序員必知35個jQuery 代碼片段
- jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法
- 解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法
- 基于jQuery和CSS3制作響應式水平時間軸附源碼下載
- jquery+css3實現(xiàn)會動的小圓圈效果
- jQuery 3.0 的變化及使用方法
- 酷炫jQuery全屏3D焦點圖動畫效果
- 即將發(fā)布的jQuery 3 有哪些新特性
相關(guān)文章
關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法,需要的朋友可以參考下2017-03-03jQuery實現(xiàn)鼠標移到元素上動態(tài)提示消息框效果
當光標移動到某些元素上時,會彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個不錯的示例,大家可以感受下2013-10-10Jquery結(jié)合HTML5實現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實現(xiàn)對文件的上傳的方法和實例,非常的實用,有需要的小伙伴可以參考下。2015-06-06根據(jù)Bootstrap Paginator改寫的js分頁插件
本文主要對根據(jù)Bootstrap Paginator改寫的js插件進行詳細介紹,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12jQuery實現(xiàn)倒計時(倒計時年月日可自己輸入)
本篇文章主要對jQuery實現(xiàn)倒計時進行了實例分析。并附上實例源碼,有興趣的朋友可以下載源碼調(diào)試運行試試看,希望對大家有所幫助2016-12-12基于DOM節(jié)點刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)硪黄贒OM節(jié)點刪除之empty和remove的區(qū)別(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09