欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2010年09月15日 01:29:21   作者：  
利用JQUERY簡單的實現(xiàn)功能菜單的折疊效果。本人初學(xué)，寫后臺稍多一點，很少寫前臺的效果。還請大蝦們多多指教。
菜單為二級，初始化時為折疊效果，單擊大項標(biāo)題時展開，顯示二級列表。
HTML代碼如下：
復(fù)制代碼 代碼如下:

<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;正式項目</a></li>
<li><a href='#' title=''>&nbsp;&nbsp;點此新增</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;更新流程</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;正式項目</a></li>
<li><a href='#' title=''>&nbsp;&nbsp;點此新增</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;正式項目</a></li>
<li><a href='#' title=''>&nbsp;&nbsp;點此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">返回首頁</span></div>
</div>
</body>

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

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

相關(guān)文章

最新評論