Bootstrap 折叠

在本教程中，您将学习如何使用 Bootstrap 显示和隐藏元素。

使用 Bootstrap 切换显示内容

您可以使用 Bootstrap 折叠 JavaScript 插件轻松显示和隐藏（或展开和折叠）网页上的特定元素。按钮和锚点（即 <button> 和 <a> 元素）通常用作映射到要切换的元素的触发器。

通过数据属性展开和折叠元素

您可以通过单击按钮或通过数据属性链接在 Bootstrap 中显示和隐藏元素，而无需编写任何 JavaScript 代码。让我们尝试一个例子，看看它是如何工作的：

示例

<!-- Trigger Buttons HTML -->
<a href="#myCollapse" data-bs-toggle="collapse">Toggle Element</a>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>

<!-- 可折叠元素 HTML -->
<div class="collapse show" id="myCollapse">
    <div class="card card-body">这是一个通过数据属性显示和隐藏特定元素的简单示例。 单击任何触发按钮以切换此面板。</div>
</div>

我们刚刚创建了一个可折叠控件，而无需编写任何 JavaScript 代码。好了，让我们一一浏览这段代码的每一部分，以便更好地理解。

代码说明

Bootstrap 折叠插件基本上需要这两个元素才能正常工作 — 触发元素，例如按钮或超链接，以及可折叠元素本身。

data-bs-toggle="collapse" 属性与属性 data-bs-target （用于按钮）或 href （用于锚点）一起添加到触发器或控制器元素中，以自动分配控制权或更多可折叠元素。
data-bs-target 或 href 属性接受 CSS 选择器（例如我们示例中的 id 选择器 #myCollapse）以将折叠应用于特定元素。
.collapse 类被添加到可折叠元素（第 6 行）。
除了类 .collapse 之外，您还可以选择将类 .show（第 6 行）添加到可折叠元素以使其默认打开。

要使可折叠控件像手风琴菜单一样在组中工作，您可以使用 Bootstrap 卡组件。请参阅 Bootstrap 手风琴上的教程以了解更多信息。

通过 JavaScript 展开和折叠元素

您也可以通过 JavaScript 手动展开和折叠元素 — 只需使用可折叠元素的 id 或 class selector 调用 collapse() Bootstrap 方法。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    // 创建一个折叠实例，在调用时切换折叠元素
    var myCollapse = new bootstrap.Collapse(element);

    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>

选项

可以将某些选项传递给 collapse() Bootstrap 方法以自定义可折叠元素的功能。

名称	类型	默认值	说明
parent	selector	false	指定父项下的所有其他可折叠元素将在调用时显示此可折叠项时关闭。
toggle	boolean	true	在调用时切换可折叠元素。

您还可以使用手风琴上的数据属性设置这些选项 — 只需将选项名称附加到 data-bs-，如 data-bs-parent="#myAccordion", data-bs-toggle="false"。

方法

这些是标准Bootstrap程序的折叠方法：

传递选项

您还可以使用选项对象将 options 传递给折叠。

在以下示例中，可折叠元素的显示不会在调用时切换，因为可折叠元素的 toggle 选项设置为 false。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle", {
            toggle: false
        });
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    /* 创建一个折叠实例，但不要切换
    调用时的折叠元素 */
    var myCollapse = new bootstrap.Collapse(element, {
        toggle: false
    });

    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>

toggle

此方法切换（显示或隐藏）可折叠元素。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("toggle");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    // 创建一个折叠实例，在调用时切换折叠元素
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>

show

此方法显示可折叠元素。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("show");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");
    
    // 创建一个折叠实例，在调用时切换折叠元素
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.show();
    });
});
</script>

hide

这个方法隐藏了一个可折叠的元素。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCollapse").collapse("hide");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");
    
    // 创建一个折叠实例，在调用时切换折叠元素
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.hide();
    });
});
</script>

dispose

此方法破坏元素的折叠（即删除 DOM 元素上存储的数据）。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function() {
    $("#myBtn").click(function() {
        var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}

        $("#myCollapse").collapse("dispose");
        console.log(myCollapse);
        // {_element: null, _isTransitioning: null, _config: null, _triggerArray: null, _selector: null, …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    btn.addEventListener("click", function(){
        var myCollapse = bootstrap.Collapse.getInstance(element);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}

        myCollapse.dispose();
        console.log(myCollapse);
        // {_element: null, _isTransitioning: null, _config: null, _triggerArray: null, _selector: null, …}
    });
});
</script>

getInstance

这是一个静态方法，允许您获取与 DOM 元素关联的折叠实例。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getInstance($("#myCollapse")[0]);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    btn.addEventListener("click", function(){        
        var myCollapse = bootstrap.Collapse.getInstance(element);
        console.log(myCollapse);
        // {_element: div#myCollapse.collapse.show, _isTransitioning: false, _config: {…}, _triggerArray: Array(2), _selector: "#myCollapse", …}
    });
});
</script>

getOrCreateInstance

这是一种静态方法，允许您获取与 DOM 元素关联的折叠实例，或者在折叠未初始化的情况下创建一个新实例。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCollapse = bootstrap.Collapse.getOrCreateInstance($("#myCollapse")[0]);
        console.log(myCollapse);
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    btn.addEventListener("click", function(){     
        var myCollapse = bootstrap.Collapse.getOrCreateInstance(element);
        console.log(myCollapse);
    });
});
</script>

提示： 不能在类的实例（即对象）上调用静态方法。他们被称为类本身。关键字 static 用于定义类的静态方法。

事件

Bootstrap 的折叠类包含一些用于挂钩折叠功能的事件。

事件	说明
show.bs.collapse	此事件在调用 show 实例方法时立即触发。
shown.bs.collapse	当折叠元素对用户可见时触发此事件。它会等到 CSS 转换过程完全完成后才会被触发。
hide.bs.collapse	调用 hide 方法时立即触发此事件。
hidden.bs.collapse	当折叠元素对用户隐藏时触发此事件。它会等到 CSS 转换过程完全完成后才会被触发。

以下示例在可折叠元素的滑动过渡已完全完成时向用户显示警告消息。

示例

jQuery JavaScript

Try this code »

<script>
$(document).ready(function(){
    $("#myCollapse").on("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function(){
    var myCollapse = document.getElementById("myCollapse");

    myCollapse.addEventListener("hidden.bs.collapse", function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>

Bootstrap 折叠

使用 Bootstrap 切换显示内容

通过数据属性展开和折叠元素

示例

代码说明

通过 JavaScript 展开和折叠元素

示例

选项

方法

传递选项

示例

toggle

示例

show

示例

hide

示例

dispose

示例

getInstance

示例

getOrCreateInstance

示例

事件

示例

关于我们

联系方式

互动工具