<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<title></title>
</head>
<body>
<!--
作者：百宝箱工作室 微课堂教学QQ：425680248
时间：2018-04-15
描述：单个折叠菜单
1.给要点击的标签添加一个data-toggle="collapse"属性，并且给该标签添加
一个data-target="#coll"属性，该属性值要与内容区域的id或class的值相同
2.给对应的内容区域添加一个id或class，与要点击的标签的data-target的值相同。
注意：1.内容区域不能有padding值，可以在内容区域外增加一个父级元素，把id写在父级标签内。
2.内容区域的父级元素增加class="in"解决了第一次点击时，收缩后立即展开的问题。
-->
<div class="container">
<div class="row col-lg-4" style="margin-top: 50px;">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title"><a href="#" data-toggle="collapse" data-target="#coll" >百宝箱IT微课堂项目教学（点击看看）</a></h2>
</div>
<!--增加class="in"解决了第一次点击时，收缩后立即展开的问题-->
<div id="coll" class="in">
<div class="panel-body">
<p>目前主要的教学项目有Dreamweaver网页设计与网站开发、Photoshop平面设计与制作、Flash动画设计与制作、数据库设计与应用、C#.NET程序设计、ASP.NET程序设计、Office办公软件应用。</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
</html>
