案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap 实例 - 折叠（Collapse）插件事件</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
​
12
<div class="panel-group" id="accordion">
13
    <div class="panel panel-info">
14
        <div class="panel-heading">
15
            <h4 class="panel-title">
16
                <a data-toggle="collapse" data-parent="#accordion"
17
                   href="#collapseexample">
18
                    点击我进行展开，再次点击我进行折叠。--shown 事件
19
                </a>
20
            </h4>
21
        </div>
22
        <div id="collapseexample" class="panel-collapse collapse">
23
            <div class="panel-body">
24
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
25
                cred nesciunt sapiente ea proident.
26
                Ad vegan excepteur butcher vice lomo.
27
            </div>
28
        </div>
29
    </div>
30
</div>
31
​
32
<script type="text/javascript">
33
    $(function () {
34
        $('#collapseexample').on('show.bs.collapse', function () {
35
            alert('嘿，当您展开时会提示本警告');})
36
    });
37
</script>
38
​
39
​
40
</body>
41
</html>