bootstrap5 下拉菜单方法详解——迹忆客-ag捕鱼王app官网

本章节我们介绍这些是标准bootstrap程序的下拉菜单方法。

toggle

此方法切换给定导航栏或选项卡式导航的下拉菜单。

$(document).ready(function(){
    $("#mybtn").click(function(){
        $("#mydropdown").dropdown("toggle");
    });
});

show

此方法显示给定导航栏或选项卡式导航的下拉菜单。

$(document).ready(function(){
    $("#mybtn").click(function(){
        $("#mydropdown").dropdown("show");
    });
});

hide

此方法隐藏给定导航栏或选项卡式导航的下拉菜单。

$(document).ready(function(){
    $("#mybtn").click(function(){
        $("#mydropdown").dropdown("hide");
    });
});

update

此方法更新元素下拉列表的位置。

$(document).ready(function(){
    $("#mybtn").click(function(){
        $("#mydropdown").dropdown("update");
    });
});

dispose

此方法会破坏元素的下拉列表（即删除存储在 dom 元素上的数据）。

$(document).ready(function(){
    $("#mybtn").click(function(){
        $("#mydropdown").dropdown("dispose");
    });
});

getinstance

这是一个静态方法，它允许您获取与 dom 元素关联的下拉菜单实例。

$(document).ready(function(){
    $("#mybtn").click(function(){
        var mydropdown = bootstrap.dropdown.getinstance($("#mydropdown")[0]);
        console.log(mydropdown);
        // {_element: button#mydropdown.btn.btn-primary.dropdown-toggle, _popper: {…}, _config: {…}, _menu: div.dropdown-menu, _innavbar: false}
    });
});

getorcreateinstance

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

$(document).ready(function(){
    $("#mybtn").click(function(){
        var mydropdown = bootstrap.dropdown.getorcreateinstance($("#mydropdown")[0]);
        console.log(mydropdown);
        // {_element: button#mydropdown.btn.btn-primary.dropdown-toggle, _popper: null, _config: {…}, _menu: div.dropdown-menu, _innavbar: false}
    });
});