jQuery實現(xiàn)菜單的顯示和隱藏功能示例
更新時間：2018年07月24日 10:55:09 作者：金含
這篇文章主要介紹了jQuery實現(xiàn)菜單的顯示和隱藏功能,結(jié)合實例形式分析了jQuery基于事件響應(yīng)及css方法動態(tài)改變菜單樣式的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)菜單的顯示和隱藏功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.fzitv.net 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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試，效果如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- php+jQuery實現(xiàn)的三級導航欄下拉菜單顯示效果
- jQuery實現(xiàn)的點擊顯示隱藏下拉菜單功能完整示例
- jQuery實現(xiàn)點擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
- jQuery實現(xiàn)可高亮顯示的二級CSS菜單效果
- jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
- jquery實現(xiàn)鼠標經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
- jquery實現(xiàn)鼠標滑過顯示二級下拉菜單效果
- 基于jquery實現(xiàn)導航菜單高亮顯示（兩種方法）
- 鼠標懸浮顯示二級菜單效果的jquery實現(xiàn)
- jquery實現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動
- 基于jquery實現(xiàn)后臺左側(cè)菜單點擊上下滑動顯示
- jQuery實現(xiàn)菜單顯示效果
相關(guān)文章
jQuery和CSS3對于web前端開發(fā)肯定用得也比較多，接下來分享一些由jQuery和CSS3制作成的特效，希望對哪些喜歡學習特效的朋友有所幫助2013-04-04
這篇文章主要介紹了在jquery ajax中使用jsonp時的限制如何解決,大家可以參考一下這個方法2013-11-11
剛學習jQuery，覺得有的東西確實有必要寫下來，加深下記憶，本文純屬給自己寫的，希望大家不要見笑。2010-12-12
在jQuery中,常常需要對元素的某個屬性或數(shù)值進行比較,判斷是否大于等于某個特定的值,在這種情況下,使用大于等于（>=）操作符是非常常見的,本文將介紹如何在jQuery中使用大于等于操作符的技巧,需要的朋友可以參考下2024-09-09
jquery ui dialog實現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實現(xiàn)彈窗特效的思路及代碼，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了jQuery中的val()的使用,需要的朋友可以參考下2014-02-02
本篇文章主要是對Jquery Uploadify上傳帶進度條的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要為大家詳細介紹了jquery uploadify如何取消已上傳成功文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
最佳6款用于移動網(wǎng)站開發(fā)的jQuery 圖片滑塊插件小結(jié)
隨著智能手機的普及，越來越多的用戶喜歡通過手機中瀏覽網(wǎng)頁。今天這篇文章為大家推薦最佳6款用于移動應(yīng)用的 jQuery 圖片滑塊插件，這些插件很好的處理了觸屏事件，效果平滑，幫助你構(gòu)建用戶體驗良好的移動網(wǎng)站2012-07-07
jQuery使用unlock.js插件實現(xiàn)滑動解鎖
unlock.js插件具有滑動解鎖，尺寸、顏色、字體大小等都可以個性化定制等特點，接下來通過本文給大家分享jQuery使用unlock.js插件實現(xiàn)滑動解鎖思路講解，感興趣的朋友一起看看吧2017-04-04