DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於JQuery的簡單實現折疊菜單代碼
基於JQuery的簡單實現折疊菜單代碼
編輯:JQuery特效代碼     
菜單為二級,初始化時為折疊效果,單擊大項標題時展開,顯示二級列表。
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">服務管理</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 等待提交</a></li>
<li><a href='#' title=''> 等待發布</a></li>
<li><a href='#' title=''> 正式項目</a></li>
<li><a href='#' title=''> 點此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">更新流程</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 後台搜索</a></li>
<li><a href='#' title=''> 更新流程</a></li>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">FAQ管理</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 等待提交</a></li>
<li><a href='#' title=''> 等待發布</a></li>
<li><a href='#' title=''> 正式項目</a></li>
<li><a href='#' title=''> 點此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">下載管理</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 等待提交</a></li>
<li><a href='#' title=''> 等待發布</a></li>
<li><a href='#' title=''> 正式項目</a></li>
<li><a href='#' title=''> 點此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">返回首頁</span></div>
</div>
</body>

其中JQUERY腳本,只需簡單的幾行便可以實現想要的效果。具體代碼如下所示:
代碼如下:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//將二級菜單設置為不可見
$(".FAQlist").css("display", "none");
//單擊一級菜單觸發的事件
$(".bartitleFAQ").click(function () {
$(".FAQlist").css("display", "none");//將二級菜單全部設置為不可見
$(this).next(".FAQlist").css("display", "block");//當前一級菜單的二級菜單設置為可見
})
})
</script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved