Jquery+Bootstrap实现Collapse菜单源码(手风琴折叠效果)

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,文化部部署主要互联网应用商店开展手机表演平台专项清理,腾讯、百度、阿里、360、华为、小米、联想等主要互联网应用商店严审手机表演平台主体资质,对存量手机表演平台进行专项清理,共删除下线手机表演平台291款,不予上线544款,责令补充主体资质材料973款,核实变更主体信息38款。,路虎娱乐城,足球投注规则

511遇见

引入Bootstrap相关文件

  1. <link rel="stylesheet" href="bootstrap.min.css">
  2. <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  3. <script src="js/bootstrap.min.js"></script>

Bootstrap原生态Collapse效果(点击查看)

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

源码:

  1. <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  2.   <div class="panel panel-default">
  3.     <div class="panel-heading" role="tab" id="headingOne">
  4.       <h4 class="panel-title">
  5.         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  6.           Collapsible Group Item #1
  7.         </a>
  8.       </h4>
  9.     </div>
  10.     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  11.       <div class="panel-body">
  12.         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
  13.       </div>
  14.     </div>
  15.   </div>
  16.   <div class="panel panel-default">
  17.     <div class="panel-heading" role="tab" id="headingTwo">
  18.       <h4 class="panel-title">
  19.         <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  20.           Collapsible Group Item #2
  21.         </a>
  22.       </h4>
  23.     </div>
  24.     <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
  25.       <div class="panel-body">
  26.         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
  27.       </div>
  28.     </div>
  29.   </div>
  30.   <div class="panel panel-default">
  31.     <div class="panel-heading" role="tab" id="headingThree">
  32.       <h4 class="panel-title">
  33.         <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  34.           Collapsible Group Item #3
  35.         </a>
  36.       </h4>
  37.     </div>
  38.     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
  39.       <div class="panel-body">
  40.         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
  41.       </div>
  42.     </div>
  43.   </div>
  44. </div>

加入新的CSS代码渲染效果如上图

  1. #accordion .panel-title a{
  2. 		display: block;
  3. 		font-size: 16px;
  4. 		font-weight: bold;
  5. 		color: #f7c59f;
  6. 		padding: 15px 48px 15px 20px;
  7. 		background: #e16b47;
  8. 		position: relative;
  9. 		transition: all 0.3s ease 0s;
  10. 	}
  11. 	#accordion .panel-title a.collapsed{
  12. 		color: #e16b47;
  13. 		background: #f7c59f;
  14. 		border-bottom: 1px solid #3d3537;
  15. 	}
  16. 	#accordion .panel-title a:after,
  17. 	#accordion .panel-title a.collapsed:after{
  18. 		content: "";
  19. 		display: block;
  20. 		width: 3px;
  21. 		height: 100%;
  22. 		position: absolute;
  23. 		top: 0;
  24. 		right: 30px;
  25. 		background: #f7c59f;
  26. 	}
  27. 	#accordion .panel-title a.collapsed:after{
  28. 		background: #e16b47;
  29. 	}
  30. 	#accordion .panel-title a:before,
  31. 	#accordion .panel-title a.collapsed:before{
  32. 		content: "\f068";
  33. 		font-family: FontAwesome;
  34. 		width: 25px;
  35. 		height: 25px;
  36. 		line-height: 25px;
  37. 		border-radius: 50%;
  38. 		background: #f7c59f;
  39. 		position: absolute;
  40. 		top: 12px;
  41. 		right: 19px;
  42. 		font-size: 14px;
  43. 		color: #e16b47;
  44. 		text-align: center;
  45. 		z-index: 1;
  46. 	}
  47. 	#accordion .panel-title a.collapsed:before{
  48. 		content: "\f067";
  49. 		color: #f7c59f;
  50. 		background: #e16b47;
  51. 	}
  52. 	#accordion .panel-body{
  53. 		background: #e16b47;
  54. 		color: #f7c59f;
  55. 		padding: 20px 50px 15px 20px;
  56. 		line-height: 25px;
  57. 		border: none;
  58. 		position: relative;
  59. 	}
  60. 	#accordion .panel-body:after{
  61. 		content: "";
  62. 		display: block;
  63. 		width: 3px;
  64. 		height: 100%;
  65. 		background: #f7c59f;
  66. 		position: absolute;
  67. 		top: 0;
  68. 		right: 30px;
  69. 	}

源码下载和在线预览

在线预览地址:http://www.513jianzhu.com/gfjsyldcwz/demo/jquery-bootstrap-accordion-menu/index.html
百度云盘下载:http://www.513jianzhu.com/gfjsyldcwz/s/1i4AKq4P


发布日期:

所属分类: BootStrap, JavaScript/jquery 标签: