Twitter引导程序:删除/切换类似复选框的按钮组的活动状态

Twitter Bootstrap: Remove/Toggle the active state of checkbox-like button group

本文关键字：复选框 按钮 活动状态 引导程序 删除 Twitter      更新时间：2024-01-06

使用twitters Bootstrap，我创建了一个具有单选框行为的按钮组，让用户在不同状态之间进行选择。这是开箱即用的。

我安排了一个jsFiddle，示例如下：http://jsfiddle.net/jpxWj/

我尝试过（并且想要）的是，当我第二次单击活动按钮时，可以删除按下的状态。

我尝试使用jQuerys removeClass()从btn类中删除active类，但它不起作用（我也尝试过用.on()删除，但这只是保持活动始终隐藏/删除）

在我看来，这是一个未知的事件现象。你可以在这里阅读更多关于它的信息。

编辑：

详细地说，简单的.removeClass之所以不起作用，是因为有多个侦听器在侦听同一事件。因此，当click事件被触发时，普通的.removeClass会删除该类，但随后Twitter引导处理程序会再次添加它！为了防止在您的处理程序之后执行任何其他处理程序，您可以执行e.stopPropagation。然而，这并不能停止附加到与您的元素相同的元素的处理程序，它只会停止树上更远的处理程序。为了完全确保在您的处理程序之后不会执行其他处理程序，可以使用event.stopImmediatePropagation()。

Bootstrap 3更新：

    $('body').on('click', '.btn-group .btn.active',function(e){
       e.preventDefault();
       e.stopImmediatePropagation();
       $(this).find('input').removeAttr('checked');
       $(this).removeClass('active');
    });
相关文章：