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 ='#' > &nbsp;&nbsp; 等待提交 </ a ></ li >
                 < li >< a  href ='#'  title ='' > &nbsp;&nbsp; 等待发布 </ 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; 等待发布 </ 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 >
                 < 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脚本，只需简单的几行便可以实现想要的效果。具体代码如下所示：

代码

<script language="javascript" src="js/jquery-1.4.2.js" type="text/javascript">

< 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>