点击div折叠

   doctype html  >  
   html  >  
   head  >  
       meta   charset  ="utf-8"  >  
       meta   content  ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"   name  ="viewport"  > 
       title  > 测试   title  >  
       style   type  ="text/css"  >  
        *  {   margin  :  0  ;   padding  :  0  ;  }  
        .menu  {   width  :  100%  ;  }  
        .menu .item  {   width  :  100%  ;   height  :  auto  ;   background-color  :   #fefefe  ;  }  
        .menu .item h1  {   font-size  :  15px  ;   width  :  100%  ;   position  :  relative  ;  }  
        .menu .item h1 i  {   display  :   inline-block  ;   height  :  15px  ;   width  :  10px  ;   position  :  absolute  ;   right  :  10px  ;   top  :  0  ;   background  :   url(images/right.png) no-repeat  ;   background-size  :  10px auto  ;  }  
        .menu .item ul  {   display  :   none  ;  }  
        .menu .item ul li  {   list-style  :  none  ;   color  :  #000  ;   background-color  :   #fefefe  ;   border-bottom  :  solid 1px #ededed  ;   line-height  :   32px  ;   width  :  100%  ;   position  :  relative  ;  }  
        .menu .item ul li p  {   display  :   none  ;  }          
        .menu .item.active h1 i  {   display  :   inline-block  ;   height  :  10px  ;   width  :  15px  ;   position  :  absolute  ;   right  :  10px  ;   top  :  3px  ;   background  :   url(images/down.png) no-repeat  ;   background-size  :  15px auto  ;  }  
        .menu .item ul li span.icon  {  display  :   inline-block  ;   height  :  15px  ;   width  :  10px  ;   position  :  absolute  ;   right  :  10px  ;   top  :  0  ;   background  :   url(images/right.png) no-repeat  ;   background-size  :  10px auto  ;  }  
        .menu .item ul li.active span.icon  {   display  :   inline-block  ;   height  :  10px  ;   width  :  15px  ;   position  :  absolute  ;   right  :  10px  ;   top  :  3px  ;   background  :   url(images/down.png) no-repeat  ;   background-size  :  15px auto  ;  }  
        .menu .item.active ul  {   display  :   block  ;  }  
        .menu .item.active ul li.active p  {   display  :   block  ;  } 
       style  > 
   head  > 
   body  > 
       div   class  ="menu"  > 
           div   class  ="item"  > 
               h1  > 标题一   i  >  i  >  h1  > 
               ul  > 
                   li  > 1   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
                   li  > 2   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
                   li  > 3   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
               ul  > 
           div  > 
           div   class  ="item"  > 
               h1  > 标题二   i  >  i  >  h1  > 
               ul  > 
                   li  > 1   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
                   li  > 2   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
                   li  > 3   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
               ul  > 
           div  > 
           div   class  ="item"  > 
               h1  > 标题三   i  >  i  >  h1  > 
               ul  > 
                   li  > 1   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
                   li  > 2   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
                   li  > 3   span   class  ="icon"  >  span  > 
                       p  > 锋科技了束带结发历史的会计法落实到飞   p  > 
                   li  > 
               ul  > 
           div  > 
       div  > 
       script   type  ="text/javascript"   src  ="js/jquery-1.7.min.js"  >  script  > 
       script   type  ="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  ;
                    }                                
                });
            });
        });
        script  > 
   body  > 
   html  >  

查看更多关于点击div折叠的详细内容...