jQuery淡入淡出、展开收缩菜单

代码

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >    
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >    
 3  < head >    
 4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />    
 5  < title > jQuery淡入淡出、展开收缩菜单 </ title >    
 6  < style  type ="text/css" >    
 7  ul li { list-style : none ; }     
 8  ul li.menu { position : relative ; width : 120px ; }     
 9  ul li.menu ul { display : none ; text-align : center ; background : #fff ; border : 1px solid #ddd ; width : 100px ; padding : 5px ; }     
10  ul li.menu ul li { padding : 5px 0 ; border-bottom : 1px dotted #ddd ; } </ style >    
11  < script  language ="javascript"  src ="jquery.js" ></ script >    
12  < script  language ="javascript"  type ="text/javascript" >    
13  $(document).ready( function (){    
14      $( " .menu " ).hover(    
15           function (){    
16               // $(".content").fadeIn(800);      // 淡入    
17              $( " .content " ).slideDown( 800 );      //  展开    
18          }, function (){    
19               // $(".content").fadeOut(1000)     // 淡出    
20              $( " .content " ).slideUp( 1000 )　　　   //  收缩    
21          });    
22  })    
23  </ script >    
24  </ head >    
25  < body >    
26       < ul >    
27           < li  class ="menu" >    
28           < a > 弹出菜单 </ a >    
29               < ul  class ="content" >    
30                   < li >< a  href ="#" > 菜单内容1 </ a ></ li >    
31                   < li >< a  href ="#" > 菜单内容2 </ a ></ li >    
32                   < li >< a  href ="#" > 菜单内容3 </ a ></ li >    
33                   < li >< a  href ="#" > 菜单内容4 </ a ></ li >    
34                   < li >< a  href ="#" > 菜单内容5 </ a ></ li >    
35               </ ul >    
36           </ li >    
37       </ ul >    
38  </ body >    
39  </ html >    
40 

 

转载于:https://www.cnblogs.com/liwanyu/archive/2009/12/18/1627179.html