​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap3 折叠面板 - 迹忆客(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 部分
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
25
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
26
                vice lomo.
27
            </div>
28
        </div>
29
    </div>
30
    <div class="panel panel-default">
31
        <div class="panel-heading">
32
            <h4 class="panel-title">
33
                <a data-toggle="collapse" data-parent="#accordion"
34
                   href="#collapseTwo">
35
                    点击我进行展开，再次点击我进行折叠。第 2 部分
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
42
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
43
                vice lomo.
44
            </div>
45
        </div>
46
    </div>
47
    <div class="panel panel-default">
48
        <div class="panel-heading">
49
            <h4 class="panel-title">
50
                <a data-toggle="collapse" data-parent="#accordion"
51
                   href="#collapseThree">
52
                    点击我进行展开，再次点击我进行折叠。第 3 部分
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
59
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
60
                vice lomo.
61
            </div>
62
        </div>
63
    </div>
64
</div>
65
​
66
</body>
67
</html>

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