DIV点击折叠实例代码

废话不多说了,关键代码如下所示:

CSS Code 复制内容到剪贴板
  1.     
  2.     
  3.     
  4.     "utf-8">    
  5.     content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">   
  6.     测试    
  7.     "text/css">   
  8.         *{ margin:0; padding:0;}   
  9.         .menu{ width:100%;}   
  10.         .menu .item{ width:100%; height:autobackground-color#fefefe;}   
  11.         .menu .item h1{ font-size:15pxwidth:100%; position:relative;}   
  12.         .menu .item h1 i{ displayinline-blockheight:15pxwidth:10pxposition:absoluterightright:10pxtop:0; backgroundurl(images/rightright.png) no-repeatbackground-size:10px auto;}   
  13.         .menu .item ul{ displaynone;}   
  14.         .menu .item ul li{ list-style:nonecolor:#000background-color#fefefeborder-bottom:solid 1px #edededline-height32pxwidth:100%; position:relative;}   
  15.         .menu .item ul li p{ displaynone;}           
  16.         .menu .item.active h1 i{ displayinline-blockheight:10pxwidth:15pxposition:absoluterightright:10pxtop:3pxbackgroundurl(images/down.png) no-repeatbackground-size:15px auto;}   
  17.         .menu .item ul li span.icon{displayinline-blockheight:15pxwidth:10pxposition:absoluterightright:10pxtop:0; backgroundurl(images/rightright.png) no-repeatbackground-size:10px auto;}   
  18.         .menu .item ul li.active span.icondisplayinline-blockheight:10pxwidth:15pxposition:absoluterightright:10pxtop:3pxbackgroundurl(images/down.png) no-repeatbackground-size:15px auto;}   
  19.         .menu .item.active ul{ displayblock;}   
  20.         .menu .item.active ul li.active p{ displayblock;}   
  21.        
  22.   
  23.   
  24.     "menu">   
  25.         "item">   
  26.             

    标题一

      
  27.             
        
    •                 
    • 1"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •                 
    • 2"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •                 
    • 3"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •             
      
  28.         
  
  •         "item">   
  •             

    标题二

      
  •             
        
    •                 
    • 1"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •                 
    • 2"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •                 
    • 3"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •             
      
  •         
  •   
  •         "item">   
  •             

    标题三

      
  •             
        
    •                 
    • 1"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •                 
    • 2"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •                 
    • 3"icon">   
    •                     

      锋科技了束带结发历史的会计法落实到飞

        
    •                 
    •   
    •             
      
  •         
  •   
  •     
  •   
  •     "text/javascript" src="js/jquery-1.7.min.js">   
  •     "text/javascript">   
  •         jQuery(function(){   
  •             $('.menu .item').each(function(){   
  •                 var flag=true;   
  •                 $(this).find('h1').on('click',function(){   
  •                     if(flag){   
  •                         $('.menu .item').removeClass('active');   
  •                         $(this).parent('.item').addClass('active');                           
  •                         flag=false;   
  •                     }else{   
  •                         $(this).parent('.item').removeClass('active');   
  •                         flag=true;   
  •                     }   
  •                 });   
  •             });   
  •             $('.menu .item ul li').each(function(){       
  •                 var flag=true;               
  •                 $(this).on('click',function(event){   
  •                     event.preventDefault();   
  •                     event.stopPropagation();   
  •                     if(flag){   
  •                         $('.menu ul li').removeClass('active');   
  •                         $(this).addClass('active');   
  •                         flag=false;   
  •                     }else{   
  •                         $(this).removeClass('active');   
  •                         flag=true;   
  •                     }                                   
  •                 });   
  •             });   
  •         });   
  •        
  •   
  •   
  • DIV点击折叠实例代码_第1张图片

    好了,本文内容到此结束,希望对大家有所帮助!

    你可能感兴趣的:(DIV点击折叠实例代码)