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类名称。

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

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

1 个答案: