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