Jquery 手风琴菜单

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="Css/Commom.css"   />
     < script  src ="Scripts/jquery-1.4.1.js"  type ="text/javascript" ></ script >
     < script  language ="javascript"  type ="text/javascript" >
        $( function  () {

            $( " ul " ).hide();
            $( " li:even " ).css( " background " ,  " #ebf1de " ).css( " padding " ,  " 5px " );
            $( " li:odd " ).css( " background " ,  " #FFFFFF " ).css( " padding " ,  " 5px " );
            $( " p " ).click( function  () {
                $( this ).next( " .column >ul " ).slideDown( " fast " ).siblings( " .column >ul " ).slideUp( " fast " );
                $( this ).css( " color " , " red " ).siblings( " .column >p " ).css( " color " , " black " );
            });
        });
     </ script >
</ head >
< body >
     < div  class =" column" >
         < p  class ="bgred" >
            我的好友 </ p >
         < ul  class ="ulshow" >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
             < li > 张三 </ li >
         </ ul >
         < p  class ="bgred" >
            陌生人 </ p >
         < ul  class ="ulshow" >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
             < li > 李四 </ li >
         </ ul >
         < p  class ="bgred" >
            黑名单 </ p >
         < ul  class ="ulshow" >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
             < li > 王二麻子 </ li >
         </ ul >
     </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/zhuiyi/archive/2011/06/16/2083158.html