JavaScript折叠到jQuery

Question

我对编码非常陌生，我一直在尝试将此JavaScript代码转换为jQuery。如果有人想解释或演示我该怎么做，我将不胜感激：）

//W3School Collapse Div
var coll = document.getElementsByClassName("collapse");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
  });
}

Answer 1

也为您输入了一些ES6语法。请记住，如果要在元素上使用jQuery方法，则它必须是jQuery对象。

const coll = $('.collapse'); // This gets all elements with this CSS selector

coll.each((i, element) => { // Loop through all the elements
  element.click(() => { // Register a click event handler
    // From here I'm not sure where the variables comes from
    this.classList.toggle("active");
    var content = $(this.nextElementSibling); // Convert a regular element to a jQuery object
    if (content.css('maxHeight')) {
      content.css('maxHeight', null);
    } else {
      content.css('maxHeight', content.css('scrollHeight') + 'px');
    }
  });
});