javascript - CF7 5秒后隐藏`.wpcf7-mail-sent-ok`

发送表单后，我试图隐藏Contact Form 7的wpcf7-mail-sent-ok元素。但是，我得到了一些意想不到的结果，我不确定为什么。

这是我WP中footer.php文件中的代码。

// Contact Form 7 mail sent...
document.addEventListener('wpcf7mailsent', function(event) {

  $('.wpcf7-mail-sent-ok').delay(5000).fadeOut('slow').hide(0);

}, false);

这是应该发生的事的一个例子。

$('.wpcf7-mail-sent-ok').delay(3000).fadeOut('slow').hide(0);

.wpcf7-response-output {
  padding: 1rem;
  background: #f00;
  color: #fff;
  border-radius: 0.8333rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Thank you for your message. It has been sent.</div>

  问题-它实际上在执行反向操作，这很奇怪。我的意思是，它等待5秒钟，然后逐渐消失，然后盒子无限期地坐在那里。


注意：控制台中没有收到任何错误。

任何帮助将非常感激。

最佳答案

您是否必须使用JS，可以通过CSS完成相同的操作

.wpcf7 .wpcf7-form .wpcf7-mail-sent-ok {
    display: none !important;
}