文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

隐藏 显示 指定内容，一般可用于新闻等 可以一次展开全部或者一次打开唯一一个

时间：2014-11-02 02:11:23   收藏：0   阅读：289

隐藏 显示 指定内容，一般可用于新闻等 可以一次展开全部或者一次打开唯一一个

?本例于《jquery点击显示或隐藏内容,可以一次展开多个和点击按钮一次全部展开》差不多的，也可以参考这个

bubuko.com,布布扣
演示

?

XML/HTML Code
  1. <div?id="demo-wrapper">??
  2. ????????<div?class="akordeon"?id="buttons">??
  3. ????????????<div?class="akordeon-item?expanded">??
  4. ????????????????<div?class="akordeon-item-head">??
  5. ????????????????????<div?class="akordeon-item-head-container">??
  6. ????????????????????????<div?class="akordeon-heading">??
  7. ????????????????????????????Freejs-导航菜单??
  8. ????????????????????????</div>??
  9. ????????????????????</div>??
  10. ????????????????</div>??
  11. ????????????????<div?class="akordeon-item-body">??
  12. ????????????????????<div?class="akordeon-item-content">??
  13. ????????????????????????<p>??
  14. ????????????????????????????<ul>??
  15. ????????????????????????????????<li>??
  16. ????????????????????????????????????<a?href="http://www.freejs.net/daohangcaidan.html">各种下拉菜单,导航,多级菜单,右侧展开,左侧展开</a>??
  17. ????????????????????????????????</li>??
  18. ????????????????????????????</ul>??
  19. ????????????????????????</p>??
  20. ????????????????????</div>??
  21. ????????????????</div>??
  22. ????????????</div>??
  23. ????????????<div?class="akordeon-item">??
  24. ????????????????<div?class="akordeon-item-head">??
  25. ????????????????????<div?class="akordeon-item-head-container">??
  26. ????????????????????????<div?class="akordeon-heading">??
  27. ????????????????????????????tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab??
  28. ????????????????????????</div>??
  29. ????????????????????</div>??
  30. ????????????????</div>??
  31. ????????????????<div?class="akordeon-item-body">??
  32. ????????????????????<div?class="akordeon-item-content">??
  33. ????????????????????????<a?href="http://www.egrappler.com/contents/jQuery-compact-social-media-share-plugin/demo/index.htm">??
  34. ????????????????????????????<img?id="social-media-share"?width="150px"?height="100px"?style="border:?none;?float:?left;??
  35. ????????????????????????????????margin-right:?10px;"?src="images/jQuery-minimal-social-media-share-plugin.jpg"?/></a>??
  36. ????????????????????????tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab??
  37. ????????????????????</div>??
  38. ????????????????</div>??
  39. ????????????</div>??
  40. ????????????<div?class="akordeon-item">??
  41. ????????????????<div?class="akordeon-item-head">??
  42. ????????????????????<div?class="akordeon-item-head-container">??
  43. ????????????????????????<div?class="akordeon-heading">??
  44. ????????????????????????????Third?Panel??
  45. ????????????????????????</div>??
  46. ????????????????????</div>??
  47. ????????????????</div>??
  48. ????????????????<div?class="akordeon-item-body">??
  49. ????????????????????<div?class="akordeon-item-content">??
  50. ????????????????????????<p>??
  51. ????????????????????????????内容</p>??
  52. ????????????????????</div>??
  53. ????????????????</div>??
  54. ????????????</div>??
  55. ????????</div>??
  56. ????????<div?class="akordeon"?id="button-less">??
  57. ????????????<div?class="akordeon-item?expanded">??
  58. ????????????????<div?class="akordeon-item-head">??
  59. ????????????????????<div?class="akordeon-item-head-container">??
  60. ????????????????????????<div?class="akordeon-heading">??
  61. ????????????????????????????第一项??
  62. ????????????????????????</div>??
  63. ????????????????????</div>??
  64. ????????????????</div>??
  65. ????????????????<div?class="akordeon-item-body">??
  66. ????????????????????<div?class="akordeon-item-content">??
  67. ????????????????????????1??
  68. ????????????????????</div>??
  69. ????????????????</div>??
  70. ????????????</div>??
  71. ????????????<div?class="akordeon-item">??
  72. ????????????????<div?class="akordeon-item-head">??
  73. ????????????????????<div?class="akordeon-item-head-container">??
  74. ????????????????????????<div?class="akordeon-heading">??
  75. ????????????????????????????第二项??
  76. ????????????????????????</div>??
  77. ????????????????????</div>??
  78. ????????????????</div>??
  79. ????????????????<div?class="akordeon-item-body">??
  80. ????????????????????<div?class="akordeon-item-content">??
  81. ????????????????????????2??
  82. ????????????????????</div>??
  83. ????????????????</div>??
  84. ????????????</div>??
  85. ????????????<div?class="akordeon-item">??
  86. ????????????????<div?class="akordeon-item-head">??
  87. ????????????????????<div?class="akordeon-item-head-container">??
  88. ????????????????????????<div?class="akordeon-heading">??
  89. ????????????????????????????第三项??
  90. ????????????????????????</div>??
  91. ????????????????????</div>??
  92. ????????????????</div>??
  93. ????????????????<div?class="akordeon-item-body">??
  94. ????????????????????<div?class="akordeon-item-content">??
  95. ????????????????????????<p>??
  96. ????????????????????????????3</p>??
  97. ????????????????????</div>??
  98. ????????????????</div>??
  99. ????????????</div>??
  100. ????????</div>??
  101. ????</div>??

?


原文地址:http://www.freejs.net/article_jquerywenzi_306.html

原文：http://freejs.iteye.com/blog/2150890

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！