javascript - Bootstrap 3 btn-group 在单击页面上的任何位置时丢失事件类

Question

你能不能看看下面的Demo并让我知道为什么每当我单击页面上的任何位置时 btn-group 都会失去 Active 类。我期待 btn-group 只在彼此之间切换？我在这里做错了什么吗？

<div class="container">
    <div class="well">
        <div class="btn-group">
            <button type="button" class="btn btn-default" id="regi1">Left</button>
            <button type="button" class="btn btn-default" id="regi2">Middle</button>
            <button type="button" class="btn btn-default" id="regi3">Right</button>
        </div>
     </div>
</div>

Answer 1

因此，(如评论中所述)您看到的灰色填充实际上并不是应用的事件类 - 它是特定 Bootstrap 按钮元素的焦点选择行为。 (就像超链接的虚线轮廓。)尝试在单击按钮后按 Tab 键，您应该会看到焦点选择发生变化。

获得所需行为的一种方法是自己应用事件类，并使用一些 jQuery 来在单击组中的按钮时交换事件类。代码段可能如下所示:

$(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

上面的代码从 .btn-group 中的所有 .btn 元素中删除事件类，然后将事件类应用于刚刚单击的元素。

这是一个 JSFiddle demo向您展示这实现了什么(请注意，我将第一个按钮编码为在 HTML 中具有事件类开始)。如果这不是您想要的，请告诉我，我们很乐意进一步提供帮助。祝你好运!