在使用 Bootstrap 3 的 btn-group 组件时，我们可能会遇到一个问题：当点击页面上其它区域时，已处于 active 状态的按钮会失去 active class，导致用户无法明确当前选中的按钮。这个问题看似简单，实际上涉及到了一些前端知识和技巧。
问题分析
首先我们需要明确 btn-group 组件是怎么实现 active 状态的。Bootstrap 3 中的 btn-group 实际上是由多个 button 元素组成的，它们通过共同的父元素和一些特定的 CSS 类来实现样式的统一。当用户点击某个 button 时，该 button 会添加 active class，同时移除其它 button 的 active class。因此，如果用户点击其它区域，就有可能触发文档的 click 事件，进而导致当前处于 active 状态的 button 失去 active class。
解决方案
为了解决这个问题，我们需要在 btn-group 外层包裹一个新的 div，并对这个 div 绑定 click 事件。当用户点击该 div 区域时，我们手动将之前 active 的 button 添加回 active class。具体代码实现如下：
-- -------------------- ---- -------
---- ------------------
---- ------------------
------- ------------- ---------- ----------- --------------------
------- ------------- ---------- -------------------------
------- ------------- ---------- -------------------------
------
------
--------
------------------------------------ -
--- ------ - ------------
-- -------------------- -
------------- ---------------------------------
-
---
---------上面的代码中，我们首先为包裹 btn-group 的 div 添加了一个 id，方便后续的操作。然后我们在这个 div 上绑定了 click 事件，并判断点击的目标元素是否为 button。如果不是，就将之前 active 的 button 手动添加回 active class。
总结
通过上面的分析和实现，我们可以看到解决问题并不难，关键是要对事件模型和 DOM 结构有一定的了解。同时我们也可以看到，Bootstrap 组件的原理并不复杂，只是通过一些巧妙的 CSS 类实现了常见的 UI 效果。因此，我们要熟练掌握这些类的用法，并且在实际项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28853