可以使用 jQuery .click() 激活按钮的 :active CSS 属性吗？答案

【问题标题】：Can a button’s :active CSS property be activated with a jQuery .click()?可以使用 jQuery .click() 激活按钮的 :active CSS 属性吗？
【发布时间】：2020-04-28 21:13:15
【问题描述】：

这是一个困扰我很久的问题。

我在我的 CSS 中分配了 button:active 下的属性。因此，当用户单击页面上的按钮时，该按钮将采用活动属性，然后在单击事件后恢复其原始外观。例如

#start:active {
  -webkit-appearance: none;
  background-color: mediumblue;
  transform: translateY(3px);
  box-shadow: none;
}

在同一页面上，我使用 jQuery 在 keydown 事件上单击按钮。例如

$(document).keydown(function(e) {
  if (e.keyCode === 70) {
    $("#start").click();
  } 
})

但是，使用 jQuery .click() 方法仅模拟单击按钮，而没有我的 CSS 活动属性方面。我想我可以使用 .addClass() 方法并在我的 keydown 事件中为 removeClass() 设置超时，但是有没有更简单的方法来完成这个并利用 CSS 活动？

【问题讨论】：

见Set button state to active with jQuery。
这个答案是我认为合乎逻辑的解决方案，一段时间后使用addClass()，然后使用removeClass()。

标签： jquery css button

【解决方案1】：

我认为在使用 jQuery 执行 click() 之前，不要使用 :active，您可以切换/添加类似 button--active 的类！

$("#start").addClass("button--active"); $("#start").click();

【讨论】：

谢谢——正如我在问题的最后一段中提到的，我认为addClass() 将是正确的选择。似乎没有一种方法可以快速激活然后删除:active 属性（物理点击会发生）而不使用addClass（其中类具有与：活动相同的属性）然后removeClass超时。

【解决方案2】：

也许你可以使用trigger() 方法：

$("#start").trigger('focus')

【讨论】：