如何用javascript编写这个短函数？

因此，我使用jquery编写了这段代码，jquery是我熟悉的语言。但是，我没有使用jquery，无法成功地将其转换为javascript。任何帮助都将不胜感激

// Toggle Function
$('.toggle').click(function(){
  // Switches the Icon
  $(this).children('i').toggleClass('fa-pencil');
  // Switches the forms  
  $('.form').animate({
    height: "toggle",
    'padding-top': 'toggle',
    'padding-bottom': 'toggle',
    opacity: "toggle"
  }, "slow");
});

这段代码切换了我登录页面的图标和表单

---

任何提示都会很有帮助，谢谢你所做的一切

这里是到本机JavaScript的粗略转换。您需要提供CSS“.show”定义，并可能在那里定义一些CSS动画，以获得您想要的任何动画

consttoggleelement=document.querySelector（'.toggle'）；
toggleElement.addEventListener（'click'，function（）{
const icons=this.querySelectorAll（'i'）；
icons.forEach（iconElement=>iconElement.classList.toggle（'fa-pencil'）；
const form=document.querySelector（'.form'）；
form.classList.toggle（'show'）；
}，假）；

jQuery是JavaScript。我不知道人们怎么会对此感到困惑，但这确实很常见。您要问的是如何通过使用浏览器API或其他库（可能）来执行jQuery库支持的各种服务。有些服务很容易用浏览器API复制，但有些服务（如

.animate（）

）却不那么容易。@对于误解，我深表歉意，但这在浏览器中非常有效。我的问题是，当在chrome扩展中使用时，我不能来回切换。可能是它的jquery（我知道jquery是Javascript），也可能是我完全错了，但我现在正在努力弄清楚一些事情。任何帮助都将非常感谢，正如我所说的，使用浏览器

.addEventListener（）

DOMAPI可以很容易地完成事件处理程序绑定之类的事情，但是动画几乎都是jQuery；这是一个相当复杂的机制，涉及计时器和排队逻辑。@Pointy

jQuery

而不是

Javascript

jQuery

是一个跨平台的

JavaScript

库！当你说jQuery是JavaScript时，它会把人搞糊涂！他们认为两者是一样的。OP所说的，非常清楚！要将

jQuery

代码转换为本机

Javascript

代码。@Mr.x jQuery是用Javascript编写的。每个“jQuery程序”实际上都是一个JavaScript程序。而且domapi不是JavaScript。它们可以在浏览器环境中使用JavaScript，但它们不是语言的一部分。这正是我所需要的！谢谢