首页>>Jquery文字>>三种不同样式的打开折叠内容,包括同时折叠多个(2013-12-14)

三种不同样式的打开折叠内容,包括同时折叠多个

三种不同样式的打开折叠内容,包括同时折叠多个
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrapper">  
  2.   
  3.         <main class="main-wrapper">  
  4.   
  5.             <h2>1.默认设置必须展开一个项目</h2>  
  6.             <div id="first">  
  7.                 <h3>Accordion One</h3>  
  8.                 <div>  
  9.   
  10.   
  11.                     <p>test3</p>  
  12.   
  13.                     <p>test4</p>  
  14.   
  15.                     <p>test5</p>  
  16.                 </div>  
  17.   
  18.                 <h3>Accordion Two</h3>  
  19.                 <div>  
  20.   
  21.   
  22.                     <p>test3</p>  
  23.   
  24.                     <p>test4</p>  
  25.   
  26.                     <p>test5</p>  
  27.                 </div>  
  28.   
  29.                 <h3>Accordion Three</h3>  
  30.                 <div>  
  31.   
  32.   
  33.                     <p>test3</p>  
  34.   
  35.                     <p>test4</p>  
  36.   
  37.                     <p>test5</p>  
  38.                 </div>  
  39.   
  40.                 <h3>Accordion Four</h3>  
  41.                 <div>  
  42.   
  43.   
  44.                     <p>test3</p>  
  45.   
  46.                     <p>test4</p>  
  47.   
  48.                     <p>test5</p>  
  49.                 </div>  
  50.   
  51.                 <h3>Accordion Five</h3>  
  52.                 <div>  
  53.   
  54.   
  55.                     <p>test3</p>  
  56.   
  57.                     <p>test4</p>  
  58.   
  59.                     <p>test5</p>  
  60.                 </div>  
  61.   
  62.             </div><!-- end of first -->  
  63.   
  64.   
  65.             <h2>2.同时展开多个项目</h2>  
  66.   
  67.             <div id="second">  
  68.   
  69.                 <h3>Accordion One</h3>  
  70.                 <div>  
  71.   
  72.   
  73.                     <p>test3</p>  
  74.   
  75.                     <p>test4</p>  
  76.   
  77.                     <p>test5</p>  
  78.                 </div>  
  79.   
  80.                 <h3>Accordion Two</h3>  
  81.                 <div>  
  82.   
  83.   
  84.                     <p>test3</p>  
  85.   
  86.                     <p>test4</p>  
  87.   
  88.                     <p>test5</p>  
  89.                 </div>  
  90.   
  91.                 <h3>Accordion Three</h3>  
  92.                 <div>  
  93.   
  94.   
  95.                     <p>test3</p>  
  96.   
  97.                     <p>test4</p>  
  98.   
  99.                     <p>test5</p>  
  100.                 </div>  
  101.   
  102.                 <h3>Accordion Four</h3>  
  103.                 <div>  
  104.   
  105.   
  106.                     <p>test3</p>  
  107.   
  108.                     <p>test4</p>  
  109.   
  110.                     <p>test5</p>  
  111.                 </div>  
  112.   
  113.                 <h3>Accordion Five</h3>  
  114.                 <div>  
  115.   
  116.   
  117.                     <p>test3</p>  
  118.   
  119.                     <p>test4</p>  
  120.   
  121.                     <p>test5</p>  
  122.                 </div>  
  123.   
  124.             </div><!-- end of second -->  
  125.   
  126.             <h2>3.同时展开一个，但是可以全部关闭</h2>  
  127.   
  128.             <div id="thirth">  
  129.                 <h3>Accordion One</h3>  
  130.                 <div>  
  131.   
  132.   
  133.                     <p>test3</p>  
  134.   
  135.                     <p>test4</p>  
  136.   
  137.                     <p>test5</p>  
  138.                 </div>  
  139.   
  140.                 <h3>Accordion Two</h3>  
  141.                 <div>  
  142.   
  143.   
  144.                     <p>test3</p>  
  145.   
  146.                     <p>test4</p>  
  147.   
  148.                     <p>test5</p>  
  149.                 </div>  
  150.   
  151.                 <h3>Accordion Three</h3>  
  152.                 <div>  
  153.   
  154.   
  155.                     <p>test3</p>  
  156.   
  157.                     <p>test4</p>  
  158.   
  159.                     <p>test5</p>  
  160.                 </div>  
  161.   
  162.                 <h3>Accordion Four</h3>  
  163.                 <div>  
  164.   
  165.   
  166.                     <p>test3</p>  
  167.   
  168.                     <p>test4</p>  
  169.   
  170.                     <p>test5</p>  
  171.                 </div>  
  172.   
  173.                 <h3>Accordion Five</h3>  
  174.                 <div>  
  175.   
  176.   
  177.                     <p>test3</p>  
  178.   
  179.                     <p>test4</p>  
  180.   
  181.                     <p>test5</p>  
  182.                 </div>  
  183.   
  184.             </div><!-- end of thirth -->  
  185.   
  186.         </main><!-- end of main-wrapper -->  
  187.   
  188.   
  189.     </div><!-- end of wrapper -->  

 


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