bootstrap折叠内容

  <a href="#collapse1" data-toggle="collapse">显示折叠内容一</a>
  <div class="collapse" id="collapse1">
  Apart from the title of a modern 伯乐, Chinese intellectuals would like also to call Deng Xiaoping a modern 诸葛亮 minus the shortcomings of the ancient 诸葛亮.
</div>

a标签：触发显示折叠内容
-href：值为下面div标签的id值
-data-toggle:值为collapse
div标签：包含折叠内容
-collapse类
-in类：默认情况下不显示折叠内容，设置in类后，默认显示折叠内容。
-id属性

点击链接前 点击链接后

<div class="accordion" id="accordion1">
  
    <div class="accordion-group">
      <div class="accordion-heading"> 
      <a class="accordion-toggle" href="#collapse1" data-toggle="collapse" data-parent="#accordion1">显示折叠内容一</a> 
      </div>
      <div class="collapse in" id="collapse1">
        <div class="accordion-inner"> Apart from the title of a modern 伯乐, Chinese intellectuals would like also to call Deng Xiaoping a modern 诸葛亮 minus the shortcomings of the ancient 诸葛亮. </div>
      </div>
    </div>
    
    <div class="accordion-group">
      <div class="accordion-heading">
       <a class="accordion-toggle" href="#collapse2" data-toggle="collapse" data-parent="#accordion1">显示折叠内容二</a> 
       </div>
      <div class="collapse " id="collapse2">
        <div class="accordion-inner"> Apart from the title of a modern 伯乐, Chinese intellectuals would like also to call Deng Xiaoping a modern 诸葛亮 minus the shortcomings of the ancient 诸葛亮. </div>
      </div>
    </div>
    
    <div class="accordion-group">
      <div class="accordion-heading">
       <a class="accordion-toggle" href="#collapse3" data-toggle="collapse" data-parent="#accordion1">显示折叠内容三</a> 
       </div>
      <div class="collapse" id="collapse3">
        <div class="accordion-inner"> Apart from the title of a modern 伯乐, Chinese intellectuals would like also to call Deng Xiaoping a modern 诸葛亮 minus the shortcomings of the ancient 诸葛亮. </div>
      </div>
    </div>
    
  </div>

div标签：包围多个含有accordion-group类的div标签，即包含多个折叠内容。
-accordion类：
-id属性：该值对应同一个含有accordion类div包围的多个折叠内容的a标签下data-parent属性的值。这样会使同属一个父级id的折叠内容同一时间只显示一条。

-div标签：包围触发折叠内容的a标签和折叠内容。
----accordion-group类：给折叠内容添加圆角边框。

----div标签：包含触发折叠内容的a标签
--------accordion-heading类：
----a标签：触发显示折叠内容的链接
------------accordion-toggle类：将a标签转化为块级元素，方便用户点击
------------href属性：值为下面含collapse类的div标签的id值
------------data-toggle属性:值为collapse
------------data-parent属性：值为含有accordion类的父级div标签的id值。

----div标签：包含折叠内容
--------collapse类
--------in类：默认情况下不显示折叠内容，设置in类后，默认显示折叠内容。
--------id属性
--------div标签：包含折叠内容
------------accordion-inner类：给折叠内容加适当的内边距

显示折叠内容二后，折叠内容一没有自动收起。也没有显示圆角边框。

点击链接折叠内容二前 点击链接折叠内容二后