Bootstrap实现可折叠分组侧边导航菜单

效果图：

源码：

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      .panel-group{max-height:770px;overflow: auto;}
      .leftMenu{margin:10px;margin-top:5px;}
      .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}
      .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
      .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
      .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
    
  
  
    
      
 
   
     
     

  分组1
  

     
     
     

 

  
  
    分组项1-1
  
 
 

  
    分组项1-2
  
 
 

  
    分组项1-3
  
 
 

  
    分组项1-4
  
 
 

  
    分组项1-5
  
 
 

  
    分组项1-6
  
 
 

  
    分组项1-7
  
 
 

  
    分组项1-8
  
 
 

  
    分组项1-9
  
 
 

  
    分组项1-10
  
 
 

  
    分组项1-11
  
 

     
   
   
     

  分组2
  

     
     

 

  
    分组项2-1
  
 
 

  
    分组项2-2
  
 
 

  
    分组项2-3
  
 
 

  
    分组项2-4
  
 

     
    
 
      
      
 内容
      
    
    
    
    
    
    
  

总结

以上所述是小编给大家介绍的Bootstrap实现可折叠分组侧边导航菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！