jquery - 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-focus-ring-color 大纲，因为大多数浏览器不支持它，webkit 除外。