您的位置: 首页  >  文章  >  隐藏 显示 指定内容，一般可用于新闻等 可以一次展开全部或者一次打开唯一一个...

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

分类: 文章 • 2024-08-15 11:47:40

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

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

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

 

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

相关推荐