基于JQuery的簡(jiǎn)單實(shí)現(xiàn)折疊菜單代碼

更新時(shí)間：2010年09月15日 01:29:21 作者：

利用JQUERY簡(jiǎn)單的實(shí)現(xiàn)功能菜單的折疊效果。本人初學(xué)，寫后臺(tái)稍多一點(diǎn)，很少寫前臺(tái)的效果。還請(qǐng)大蝦們多多指教。

菜單為二級(jí)，初始化時(shí)為折疊效果，單擊大項(xiàng)標(biāo)題時(shí)展開(kāi)，顯示二級(jí)列表。
HTML代碼如下：

 
<body> 
<div class="mainleftFAQ"> 
<div class="category"> 
<img src="images/admin.gif" width="215" height="66" /> 
</div> 
<div id="disp"> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">服務(wù)管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;等待提交</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;等待發(fā)布</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;正式項(xiàng)目</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;點(diǎn)此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">更新流程</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;后臺(tái)搜索</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;更新流程</a></li> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">FAQ管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;等待提交</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;等待發(fā)布</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;正式項(xiàng)目</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;點(diǎn)此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">下載管理</span></div> 
<div class="FAQlist"> 
<ul> 
<li><a href='#'>&nbsp;&nbsp;等待提交</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;等待發(fā)布</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;正式項(xiàng)目</a></li> 
<li><a href='#' title=''>&nbsp;&nbsp;點(diǎn)此新增</a></li></ul> 
</div> 
<div class="bartitleFAQ"> 
<img src="images/yuan.gif" /><span class="admintext11">返回首頁(yè)</span></div> 
</div> 
</body> 

其中JQUERY腳本，只需簡(jiǎn)單的幾行便可以實(shí)現(xiàn)想要的效果。具體代碼如下所示：

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//將二級(jí)菜單設(shè)置為不可見(jiàn) 
$(".FAQlist").css("display", "none"); 
//單擊一級(jí)菜單觸發(fā)的事件 
$(".bartitleFAQ").click(function () { 
$(".FAQlist").css("display", "none");//將二級(jí)菜單全部設(shè)置為不可見(jiàn) 
$(this).next(".FAQlist").css("display", "block");//當(dāng)前一級(jí)菜單的二級(jí)菜單設(shè)置為可見(jiàn) 
}) 
}) 
</script> 

您可能感興趣的文章:

折疊菜單

相關(guān)文章

jquery checkbox,radio是否選中的判斷代碼
jquery checkbox,radio是否選中的判斷代碼,需要的朋友可以參考下。
2010-03-03
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開(kāi)隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開(kāi)就隱藏的效果，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
jquery輕量級(jí)數(shù)字動(dòng)畫插件countUp.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)滾動(dòng)數(shù)字增加插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
jquery用data方法獲取某個(gè)元素上的事件
如何獲取某個(gè)元素上的事件,jquery的給元素綁定的事件可以用data方法取出來(lái)，下面有個(gè)示例，大家可以參考下
2014-06-06
JQuery對(duì)class屬性的操作實(shí)現(xiàn)按鈕開(kāi)關(guān)效果
頁(yè)面中的按鈕開(kāi)關(guān)效果想必大家都有見(jiàn)到過(guò)吧，接下來(lái)為大家詳細(xì)介紹下如何使用JQuery對(duì)class屬性的操作方法實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過(guò)
2013-10-10
jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)全選功能效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
jquery網(wǎng)頁(yè)元素拖拽插件效果及實(shí)現(xiàn)
效果說(shuō)明：配合已有css樣式，載入插件后，網(wǎng)頁(yè)元素可以隨意在窗口內(nèi)拖拽，設(shè)置了原位置半透明和拖拽半透明的效果選項(xiàng)，可根據(jù)需要選擇。另外，當(dāng)頁(yè)面上有多個(gè)可拖拽元素時(shí)，可以載入另外一個(gè)用于設(shè)置z-index的插件，模擬windows窗口點(diǎn)擊置頂效果。
2013-08-08
淺談Jquery為元素綁定事件
jQuery 使用on綁定動(dòng)態(tài)生成的元素時(shí)，不能直接用該對(duì)象操作，而是選擇其非動(dòng)態(tài)生成的父節(jié)點(diǎn)然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。
2015-04-04
ui組件之input多選下拉實(shí)現(xiàn)方法（帶有搜索功能）
這篇文章主要介紹了ui組件之input多選下拉實(shí)現(xiàn)方法（帶有搜索功能）的相關(guān)資料,需要的朋友可以參考下
2016-07-07
jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果(類似圖片懶加載)
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果,模擬圖片懶加載功能,涉及jQuery的ajax與asp.net交互動(dòng)態(tài)顯示頁(yè)面內(nèi)容的相關(guān)技巧,需要的朋友可以參考下
2016-06-06