​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap3 折叠（Collapse）插件方法 - 迹忆客(jiyik.com)</title>
6
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
7
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
9
</head>
10
<body>
11
​
12
<div class="panel-group" id="accordion">
13
    <div class="panel panel-default">
14
        <div class="panel-heading">
15
            <h4 class="panel-title">
16
                <a data-toggle="collapse" data-parent="#accordion"
17
                   href="#collapseOne">
18
                    点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
19
                </a>
20
            </h4>
21
        </div>
22
        <div id="collapseOne" class="panel-collapse collapse in">
23
            <div class="panel-body">
24
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
25
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
26
                lomo.
27
            </div>
28
        </div>
29
    </div>
30
    <div class="panel panel-success">
31
        <div class="panel-heading">
32
            <h4 class="panel-title">
33
                <a data-toggle="collapse" data-parent="#accordion"
34
                   href="#collapseTwo">
35
                    点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
36
                </a>
37
            </h4>
38
        </div>
39
        <div id="collapseTwo" class="panel-collapse collapse">
40
            <div class="panel-body">
41
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
42
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
43
                lomo.
44
            </div>
45
        </div>
46
    </div>
47
    <div class="panel panel-info">
48
        <div class="panel-heading">
49
            <h4 class="panel-title">
50
                <a data-toggle="collapse" data-parent="#accordion"
51
                   href="#collapseThree">
52
                    点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
53
                </a>
54
            </h4>
55
        </div>
56
        <div id="collapseThree" class="panel-collapse collapse">
57
            <div class="panel-body">
58
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
59
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
60
                lomo.
61
            </div>
62
        </div>
63
    </div>
64
    <div class="panel panel-warning">
65
        <div class="panel-heading">
66
            <h4 class="panel-title">
67
                <a data-toggle="collapse" data-parent="#accordion"
68
                   href="#collapseFour">
69
                    点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
70
                </a>
71
            </h4>
72
        </div>
73
        <div id="collapseFour" class="panel-collapse collapse">
74
            <div class="panel-body">
75
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
76
                nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
77
                lomo.
78
            </div>
79
        </div>
80
    </div>
81
</div>
82
<script type="text/javascript">
83
    $(function () { $('#collapseFour').collapse({
84
        toggle: false
85
    })});
86
    $(function () { $('#collapseTwo').collapse('show')});
87
    $(function () { $('#collapseThree').collapse('toggle')});
88
    $(function () { $('#collapseOne').collapse('hide')});
89
</script>  
90
​
91
</body>
92
</html>

Design By 迹忆客 © 2023 jiyik.com ALL RIGHT RESERVED 冀ICP备15007416号-2