Bootstrap插件-collapse

时间  2019-12-27
标签 bootstrap 插件 collapse 栏目 Bootstarp 繁體版
原文   原文链接

本文转载于:猿2048网站Bootstrap插件-collapsephp

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>声明式触发手风琴</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>body {
        padding: 10px;
        margin: 10px
    }</style>
</head>
<body>
<!--触发手风琴能够经过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"-->
<div class="panel-group" id="myAccordion">
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <!--定义data-parent属性，实现点击一个其中一个元素时，关闭全部的折叠区，再打开所单击的区域（若是所单击区域是展现的，则会关闭）-->
                <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
            </h4>
        </div>
        <!--在Bootstrap框架中，若是你想让内容区域不可视，只须要在 panel-collapse 样式上添加 collapse-->
        <div class="panel-collapse collapse in" id="panel1"><!--in初始选定状态-->
            <div class="panel-body">折叠区内容</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <!--为了把标题和内容区捆绑在一块儿，能够经过锚连接的方法，把标题区域和面板区连在一块儿-->
                <a href="#panel2" data-toggle="collapse" data-target="#panel2" data-parent="#myAccordion">标题二</a>
                <!--a标签能够省去data-target，由于href中已经声明，button就必须使用data-target自定义标签了-->
            </h4>
        </div>
        <div class="panel-collapse collapse" id="panel2">
            <div class="panel-body">折叠区内容</div>
        </div>
    </div>
    <div class="panel panel-accordion panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a href="#panel3" data-toggle="collapse" data-target="#panel3" data-parent="#myAccordion">标题三</a>
            </h4>
        </div>
        <div class="panel-collapse collapse" id="panel3">
            <div class="panel-body">折叠区内容</div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程