在使用 Bootstrap 3 构建网站时，经常会使用折叠式导航栏。然而，当用户点击导航栏以外的元素时，如果没有正确地关闭已打开的折叠式导航栏，可能会影响用户体验。
本文将介绍如何使用 JavaScript 和 jQuery 在 Bootstrap 3 中实现点击导航栏以外的区域时关闭已打开的折叠式导航栏，并提供详细示例代码，帮助您轻松实现此功能。
实现方式
在 Bootstrap 3 中，当用户点击导航栏上的按钮时，会添加一个 collapsed 类来显示折叠式导航栏，再次点击则移除该类来隐藏折叠式导航栏。因此，我们可以通过检查是否存在 collapsed 类来判断折叠式导航栏当前是否已打开，进而决定是否关闭它。
同时，为了在用户点击导航栏以外的区域时自动关闭折叠式导航栏，我们需要使用事件委托（event delegation）来监听整个页面的点击事件，并检查点击的元素是否位于导航栏内或导航栏按钮上，如果不是，则关闭折叠式导航栏。
示例代码
下面是一个简单的示例代码，可以用于实现在点击导航栏以外的区域自动关闭已打开的折叠式导航栏：
---- ----- ---
---- ------------- --------------- ------------------
---- ------------------------
---- ------- ---
---- ----------------------
------- ------------- --------------------- ---------------------- -------------------------
----- ---------------------- -----------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- -------------------- ------------------
------
---- -------- ---
---- --------------- ---------------- ---------------
--- ---------- ------------
--- ----------------- ----------------------
------ ----------------------
------ ----------------------
-----
------
------
------
---- ------ ---
---- ------------------
---------- -----------
------- -- - ------ ------- -- --- -- ----- -- ---- --------- ------ ---- -------- ------- -- --- ------ ------- -- --------- ------
------
---- ---------- -- ---
------- -----------------------------------------------------------
--------
-- --------------
------------ -
-- -----------
----------------------- ----------- -
-- -------------------------------
-- ----------------------------------- ----------------- -
---------------------------------------
-
---
---
---------在上面的示例代码中，我们首先创建了一个基本的 Bootstrap 3 导航栏，并添加了一个折叠式导航栏。然后，通过 JavaScript 和 jQuery 监听整个页面的点击事件，并检查点击的元素是否位于导航栏内或导航栏按钮上，如果不是，则关闭折叠式导航栏。
总结
通过本文的学习，您已经了解如何在 Bootstrap 3 中实现点击导航栏以外的
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29805