Bootstrap 是一种流行的前端框架，它提供了许多 UI 组件和工具，其中包括下拉菜单。在某些情况下，您可能需要以编程方式打开 Bootstrap 下拉菜单，而不是依赖于用户点击触发。
本文将介绍如何使用 jQuery 来以编程方式打开 Bootstrap 下拉菜单，并提供示例代码和解释。
步骤 1：确保正确引入 Bootstrap 和 jQuery
在开始之前，请确保已正确引入 Bootstrap 和 jQuery 库。这可以通过以下方式完成：
<!-- 引入 Bootstrap 样式表 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css"> <!-- 引入 jQuery 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 Bootstrap 脚本 --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
步骤 2：找到要打开的下拉菜单
为了能够以编程方式打开下拉菜单，我们需要先找到它的 DOM 元素。在 Bootstrap 中，下拉菜单通常由一个按钮和一个菜单组成。我们可以使用 jQuery 的选择器来找到这两个元素：
var $dropdownBtn = $('#dropdownBtn');
var $dropdownMenu = $('#dropdownMenu');在这里，我们使用 # 符号来选择具有特定 ID 属性的元素。请根据您的实际情况，将 $dropdownBtn 和 $dropdownMenu 替换为您的按钮和菜单元素。
步骤 3：以编程方式打开下拉菜单
一旦找到了按钮和菜单元素，我们就可以使用 Bootstrap 提供的 JavaScript API 来打开菜单：
$dropdownBtn.dropdown('toggle');这个方法会切换下拉菜单的显示状态，如果菜单当前是隐藏的，则它会被显示出来，反之亦然。
示例代码
下面是一个完整的示例代码，演示如何以编程方式打开 Bootstrap 下拉菜单：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- --------- -------- ------------------------
---- -- --------- --- ---
----- ---------------- ---------------------------------------------------------------------------------------
---- -- ------ - ---
------- ----------------------------------------------------------------------------
---- -- --------- -- ---
------- ----------------------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
---- -----------------
------- ---------------- ---------- ------------- ---------------- ------------- --------------------------
----
---------
--- ----------------- ----------------------
------ --------------------- ----------- ----------
------ --------------------- ----------- ----------
------ --------------------- ----------- ----------
-----
------
------- -------------------- ---------- ----------- ------
-----------
---------
------
--------
---------- -- -
--- ------------ - ------------------
--- ------------- - -------------------
------------------------------------ -- -
--------------------------------
---
---
---------
-------
-------在这个示例中，我们创建了一个带有按钮
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25934