（3）bootstrap的面板，折叠，按钮

导读：
我希望实现这样的功能：点击下拉图标，就会显示相应的列表。
（1）知识点一：面板
跟以前的博文一样，先给出链接，以方便学习基础：

https://www.runoob.com/bootstrap/bootstrap-panels.html
下面来看看带语境色彩的面板这一栏

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

有点基础的都看得出来，这里有三个div，一个主面板div下有一个面板头div和一个面板体div，ok就这样了。
（2）知识点二：折叠
好说歹说，不如上链接来的实在：

https://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html
拿出一段示例代码来分析分析，如下：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                点击我进行展开，再次点击我进行折叠。
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
               折叠显示内容已省略千万字。
            </div>
        </div>
    </div>

分析：
同样有三层div，外层panel-group，次外层panel，内层又有头div和显示区panel-collapse
说明：
accordion：英文意思是折叠。
data-toggle=”collapse” ，data-parent=”#accordion” ：是标签a的两个属性，里面的内容是固定的，一遍bootstra能够识别。
（3）案例代码

<div class="panel panel-primary">
    <div class="panel-heading">
       <p class="panel-title">系统管理
          <a data-toggle="collapse" 
data-parent="#accordion"   href="#collapseOne">
           <button type="button" class="btn btn-primary btn-sm">
            <span class="glyphicon glyphicon-chevron-down"></span> 点击
            </button>
          </a>
        </p>
     </div>
   <div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
    <div>
        <p>
            <button type="button" class="btn btn-info ">菜单管理</button>
        </p>
    </div>
 <div>
    <p>
        <button type="button" class="btn btn-info ">角色管理</button>
    </p>
</div>
 <div>
    <p>
    <button type="button" class="btn btn-info ">用户管理</button>
    </p>
  </div>
</div>
</div> 
</div>

分析：
主面板panel-primary下有个面板头panel-heading，面板体panel-body，还有一个面板折叠panel-collapse，一共四个主体div。

面板头下，有一个p标签和一个a标签。而a标签下的三个属性
*data-toggle=”collapse”：添加到您想要展开或折叠的组件的链接上。
*data-parent ：把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
*href 或 data-target ：添加到父组件，它的值是子组件的 id。

而在a标签内部，我采用了bootstrap的字体图标，奉上如下链接：

https://www.runoob.com/bootstrap/bootstrap-glyphicons.html

效果截图：点击下拉图标，出现菜单列表

点击之后，看下图