jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chabaoo.cn jQuery顯示菜單隱藏和顯示</title> </head> <body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> /*jQuery演示*/ $(function(){ $("#div1").click(function(){ if($(".div2").css("display")=="block"){ $(".div2").css("display","none"); }else { $(".div2").css("display","block"); } }); }); </script> <!--div演示--> <input id="div1" type="button" value="顯示/隱藏"> <div class="div2" style="display: block"> <ui> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ui> </div> </body> </html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試,效果如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- jQuery實(shí)現(xiàn)的點(diǎn)擊顯示隱藏下拉菜單功能完整示例
- jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)可高亮顯示的二級(jí)CSS菜單效果
- jquery實(shí)現(xiàn)在網(wǎng)頁(yè)指定區(qū)域顯示自定義右鍵菜單效果
- jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示下劃線的漸變下拉菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- 鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)
- jquery實(shí)現(xiàn)下拉菜單的二級(jí)聯(lián)動(dòng)利用json對(duì)象從DB取值顯示聯(lián)動(dòng)
- 基于jquery實(shí)現(xiàn)后臺(tái)左側(cè)菜單點(diǎn)擊上下滑動(dòng)顯示
- jQuery實(shí)現(xiàn)菜單顯示效果
相關(guān)文章
JQuery設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式,通過(guò)jquery來(lái)實(shí)現(xiàn),需要注意的是中間用逗號(hào)隔開(kāi),感興趣的朋友可以參考下2013-08-08jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)控制網(wǎng)頁(yè)元素動(dòng)態(tài)居中顯示,實(shí)例分析了jQuery插件的實(shí)現(xiàn)與元素動(dòng)態(tài)顯示的技巧,需要的朋友可以參考下2015-03-03輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹(shù)形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI,針對(duì)EasyUI實(shí)現(xiàn)樹(shù)形網(wǎng)絡(luò)基本操作,分為三大方面:動(dòng)態(tài)加載、添加分頁(yè)、以及惰性加載節(jié)點(diǎn),感興趣的小伙伴們可以參考一下2015-11-11分享10篇優(yōu)秀的jQuery幻燈片制作教程及應(yīng)用案例
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,同時(shí)還有許多成熟的插件可供選擇,它可以幫助你在項(xiàng)目中加入一些非常好的效果。2011-04-04解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問(wèn)題
這篇文章主要介紹了如何解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問(wèn)題,需要的朋友可以參考下2014-05-05Web前端新人筆記之jquery入門(mén)心得(新手必看)
下面小編就為大家?guī)?lái)一篇Web前端新人筆記之jquery入門(mén)心得(新手必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05