折叠项自动展开代码报Uncaught TypeError，如何修复？

你遇到的Uncaught TypeError: Cannot read property 'apply' of null错误，核心原因很直白：你用addEventListener绑定点击事件，但并没有给元素的onclick属性赋值，所以coll[i].onclick是null，调用null.apply()自然会抛出错误。

下面给你两种简单的修复方案，任选其一都能解决问题：

方案1：抽离事件处理函数，直接调用（推荐） #

把点击逻辑抽成独立函数，既可以用来绑定事件，也能直接调用并指定上下文，代码更清晰也更容易维护：

// 抽离点击处理逻辑
function toggleCollapsible() {
  this.classList.toggle("active");
  var content = this.nextElementSibling;
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
  }
}

var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
  // 绑定点击事件
  coll[i].addEventListener("click", toggleCollapsible);
  // 屏幕宽度达标时，直接调用函数并指定this为当前元素
  if (window.screen.availWidth >= 768) {
    toggleCollapsible.call(coll[i]);
  }
}

这里用call方法把this指向当前的折叠项元素，和点击触发时的上下文完全一致，逻辑不会出问题。

方案2：直接触发元素的click事件 #

如果不想改动原有代码结构，也可以直接调用元素的click()方法，模拟用户点击操作，自动触发你用addEventListener绑定的逻辑：

var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var p = this.nextElementSibling;
    if (p.style.maxHeight){
      p.style.maxHeight = null;
    } else {
      p.style.maxHeight = p.scrollHeight + "px";
    }
  });
  if (window.screen.availWidth >= 768) {
    // 直接触发点击事件，自动执行绑定的逻辑
    coll[i].click();
  }
}

这个方法更简洁，不需要额外抽函数，适合快速修复现有代码。

补充说明 #

为什么原来的onclick.apply()不行？因为addEventListener是标准的事件绑定方式，它不会覆盖或赋值元素的onclick属性——onclick是旧的DOM0级事件绑定方式，和addEventListener是两套独立的系统，所以你用addEventListener绑定后，coll[i].onclick仍然是null，自然无法调用apply方法。

内容的提问来源于stack exchange，提问作者CaptainCodeman