bootstrap5 折叠方法——迹忆客-ag捕鱼王app官网

下面是标准 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 用于为类定义静态方法。