Bootstrap5 下拉菜单方法详解

本章节我们介绍这些是标准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}
    });
});

尝试一下