Bootstrap学习笔记 18 - Collapse

房星光
2023-12-01

Collapse

实现Collapse

  • 在某个元素(比如<div>)加上 .collapse 类,该元素用来显示折叠的内容
  • 为了控制折叠内容的显示与隐藏,需要增加另外一个元素( <a> 或者 <button>),并且加上 data-toggle="collapse"
  • 为了将折叠元素与控制折叠的元素关联起来,需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#xxx<a>可以使用 href=#xxx 代替)。xxx必须保持一致。注意 # 不能省略。

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <title>Collapse</title>
        <script>
            function showHTMLContent(showElement, codeElement) {
                $(showElement).html($('<div/>').text($(codeElement).html()).html());
            }
            $(function() {
                showHTMLContent('#showBtnCollapse', '#btnCollapse');
                showHTMLContent('#showLinkCollapse', '#linkCollapse');
                showHTMLContent('#showListCollapse', '#listCollapse');
                showHTMLContent('#showPanelCollapse', '#panelCollapse');
                showHTMLContent('#showPanelGroupCollapse', '#panelGroupCollapse');
                $('#addInClass').click(function() {
                    if (this.checked) {
                        $('#cpp').addClass('in');
                    } else {
                        $('#cpp').removeClass('in');
                    }
                    showHTMLContent('#showBtnCollapse', '#btnCollapse');
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1>Button Collapse</h1>
            <form>
                <input type="checkbox" id="addInClass"> set visible default <br>
            </form>
            <h2>代码</h2>
            <pre id="showBtnCollapse"></pre>
            <h2>样式</h2>
            <div id="btnCollapse">
                <button data-toggle="collapse" data-target="#cpp" class="btn btn-primary">C++</button>
                <div id="cpp" class="collapse">
                    C++是C语言的继承,它既可以进行C语言的过程化程序设计,
                    又可以进行以抽象数据类型为特点的基于对象的程序设计,
                    还可以进行以继承和多态为特点的面向对象的程序设计。
                </div>
            </div>

            <br><br>

            <h1>Link Collapse</h1>
            <h2>代码</h2>
            <pre id="showLinkCollapse"></pre>
            <h2>样式</h2>
            <div id="linkCollapse">
                <a data-toggle="collapse" href="#java">Java</a>
                <div id="java" class="collapse">
                    Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,
                    还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。
                </div>
            </div>

            <br><br>

            <h1>List Collapse</h1>
            <h2>代码</h2>
            <pre id="showListCollapse"></pre>
            <h2>样式</h2>
            <div id="listCollapse">
                <a data-toggle="collapse" href="#python">Python</a>
                <div id="python" class="collapse">
                    <ul class="list-group">
                        <li class="list-group-item">Python2.7</li>
                        <li class="list-group-item">Python3.5</li>
                        <li class="list-group-item">Python3.6</li>
                    </ul>
                </div>
            </div>

            <br><br>

            <h1>Panel Collapse</h1>
            <h2>代码</h2>
            <pre id="showPanelCollapse"></pre>
            <h2>样式</h2>
            <div id="panelCollapse">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" href="#panelTest">Collapsible panel</a>
                        </h4>
                    </div>
                    <div id="panelTest" class="panel-collapse collapse">
                        <div class="panel-body">Panel Body</div>
                        <div class="panel-footer">Panel Footer</div>
                    </div>
                </div>
            </div>

            <br><br>

            <h1>Panel Group Collapse</h1>
            <h2>代码</h2>
            <pre id="showPanelGroupCollapse"></pre>
            <h2>样式</h2>
            <div id="panelGroupCollapse">
                <!-- data-parent 表示当一个折叠被打开时,相同父元素下的其他子元素将会关闭折叠 -->
                <div class="panel-group" id="programmingLanguages">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h1 class="panel-title">
                                <a data-toggle="collapse" data-parent="#programmingLanguages" href="#go"> Go </a>
                            </h1>
                        </div>
                        <div id="go" class="panel-collapse collapse">
                            <div class="panel-body">
                                Go是一种新的语言,一种并发的、带垃圾回收的、快速编译的语言。
                                它具有以下特点:它可以在一台计算机上用几秒钟的时间编译一个大型的Go程序。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#programmingLanguages" href="#php"> PHP </a>
                            </h4>
                        </div>
                        <div id="php" class="panel-collapse collapse">
                            <div class="panel-body">
                                PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。
                                语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#programmingLanguages" href="#csharp"> C# </a>
                            </h4>
                        </div>
                        <div id="csharp" class="panel-collapse collapse">
                            <div class="panel-body">
                                C#是微软公司发布的一种面向对象的、运行于.NET Framework之上的高级程序设计语言。
                                并定于在微软职业开发者论坛(PDC)上登台亮相。C#是微软公司研究员Anders Hejlsberg的最新成果。
                        </div>
                        </div>
                    </div>
                </div>
            </div>     

            <br><br><br><br>

        </div>
    </body>
</html>

查看运行结果

 类似资料: