Bootstrap：重置按钮 Link 活动状态恢复正常

Question

这是 fiddle。

我的行为几乎在做它需要做的事情。

悬停效果很好，单击时按钮保持活动状态，当我单击另一个按钮时，前一个按钮变为非活动状态。

我的问题是当我再次点击活动按钮时，它不会重置为非活动状态（即恢复正常）。我已经尝试了很多方法来获得我需要的行为，但我无法让它正常工作。

我已经尝试了 $().button()、.toggle()、遍历了 documentation，还有一些我不记得了。

HTML

<a class="btn btn-success btn-md">Link One</a>
<a class="btn btn-success btn-md">Link Two</a>
<a class="btn btn-success btn-md">Link Three</a>
<a class="btn btn-success btn-md">Link Four</a>

CSS

.btn-active,
.btn-success:hover {
    background-color: #003c1e;
    color: #fff !important;
    /* Gradient */
    background: #00356B; /* Old browsers */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#006b34), to(#003c1e)) !important;
    background: -webkit-linear-gradient(#006b34 0%, #003c1e 100%) !important;
    background: -moz-linear-gradient(#006b34 0%, #003c1e 100%) !important;
    background: -o-linear-gradient(#006b34 0%, #003c1e 100%) !important;
    background: linear-gradient(#006b34 0%, #003c1e 100%) !important; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006b34', endColorstr='#003c1e',GradientType=0 ) !important; /* IE6-9 */

}

JS

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

fff

Answer 1

你快到了，尝试使用 toggleClass() 而不是 toggle()。

Toggle 用于控制元素的可见性，而 toggleClass 将为您打开和关闭 CSS class 名称。

$(".btn-success").click(function(){
    $(this).toggleClass("btn-active").siblings().removeClass("btn-active");
});

Bootstrap：重置按钮 Link 活动状态恢复正常

Bootstrap: Reset Button Link Active State Back To Normal

jquery

button

twitter-bootstrap-3