Bootstrap5 折叠方法

下面是标准 Bootstrap 程序的折叠方法：

传递选项

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

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

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

    /* Create a collapse instance, but do not toggle
    the collapse element on invocation */
    var myCollapse = new bootstrap.Collapse(element, {
        toggle: false
    });

    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});

尝试一下

toggle

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

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

    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});

尝试一下

show

此方法显示可折叠元素。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");
    
    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.show();
    });
});

尝试一下

hide

此方法隐藏可折叠元素。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");
    
    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);
    
    btn.addEventListener("click", function(){
        myCollapse.hide();
    });
});

尝试一下

dispose

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

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, …}
    });
});

尝试一下

getInstance

这是一个静态方法，我们可以使用它获取与 DOM 元素关联的折叠实例。

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", …}
    });
});

尝试一下

getOrCreateInstance

这是一个静态方法，我们可以使用它获取与 DOM 元素关联的折叠实例，或者在折叠未初始化的情况下创建一个新实例。

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);
    });
});

尝试一下

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