Twitter Bootstrap：删除/切换类似复选框的按钮组的活动状态 [英] Twitter Bootstrap: Remove/Toggle the active state of checkbox-like button group

问题描述

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

With twitters Bootstrap I've created a button group with radiobox behaviour to let the user choose between the different states. This works out of the box as supposed.

我在这里安排了一个jsFiddle示例： http://jsfiddle.net/jpxWj/

I arranged a jsFiddle with the example here: http://jsfiddle.net/jpxWj/

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

What I tried (and want) is that the pressed state can be removed when I click the active button second time.

我尝试使用jQuerys removeClass（）删除来自 btn 类的活动类，但它不起作用。 （我也尝试使用 .on（）删除，但这只是保持活动始终隐藏/删除）

I tried with jQuerys removeClass() to remove the active class from the btn classes but it won't work. (I also tried removing with .on() but this just keeps the active always hidden/removed)

推荐答案

这里你走了，这是一个非常未知的事件现象， 在我看来。您可以在这里了解更多相关信息。

Here you go, quite an unknown event phenomenon, in my opinion. You can read more about it here.

编辑：

简而言之，简单的 .removeClass 不起作用的原因，是因为有多个听众，听同一个事件。因此，当单击事件被触发时，正常的 .removeClass 将删除该类，但随后Twitter Bootstrap处理程序将再添一次！为了防止在您之后执行任何其他处理程序，您可以执行 e.stopPropagation 。但是，这并不会阻止连接到与您相同元素的处理程序，它只会阻止树上的那些元素。要完全确保在您之后没有执行其他处理程序，您可以使用 event.stopImmediatePropagation（） 。

To ellaborate, the reason why a simple .removeClass doesn't work, is because there are multiple listeners, listening to the same event. So when the click event is fired, a normal .removeClass would remove the class, but then the Twitter Bootstrap handler would add it again! To prevent any other handlers from being executed after yours, you can do e.stopPropagation. However, this does not stop the handlers attached to the same element as yours, it only stops the ones further up the tree. To completely make sure no other handlers are executed after yours, you can use event.stopImmediatePropagation().

这篇关于Twitter Bootstrap：删除/切换类似复选框的按钮组的活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！