 
<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;后臺搜索</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">返回首頁</span></div> 
</div> 
</body> 

其中JQUERY腳本，只需簡單的幾行便可以實(shí)現(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> 

您可能感興趣的文章: