removeClass可以立即工作，addClass只能在失去焦点时工作

Question

我有一些按钮，允许用户切换页面上元素的可见性。当元素可见时，该按钮应突出显示。

当它变得不可见时，高亮显示立即消失，如所需。但当它变得可见时，仅当按钮失去焦点时才会高亮显示。

if (column.visible()) {            
    $(button).addClass("highlight");
}
else {
    $(button).removeClass("highlight");
}

换句话说，“移除CSS类”会立即生效，而“添加CSS类”则不会。这里可能发生了什么？

更新:这是展示这种行为的JSFiddle：https://jsfiddle.net/f7cwfr3x/7/

Answer 1

jsFiddle工作正常。我没看到任何问题。

$(button).toggleClass("highlight", column.visible());

当您第一次单击时，column.visible()返回false，高亮显示的类将被移除。当您再次单击该按钮时，将添加column.visible()==true -高亮显示类。

不过，我不推荐使用- webkit --ring-color大纲，因为除了webkit之外，大多数浏览器都不支持它。