没问题！既然你想摆脱jQuery的依赖，用原生JS实现类似.next()的效果来处理折叠框的切换，我来一步步给你讲清楚：

1. 基础替代：直接获取下一个元素节点 #

jQuery的.next()本质是获取当前元素的下一个兄弟元素节点（自动跳过空白文本节点），原生JS的nextElementSibling属性完全可以胜任——它会自动忽略换行、空格这类文本节点，直接返回下一个元素。

步骤1：修改内联事件传递触发元素 #

先把你的<a>标签点击事件改成传递当前元素，这样函数里能精准定位触发源：

<a onClick="collapseboxtoggle(this)">
  <div class="icon-collapse-box">
    <img class="icon-collapse-icon" src="/assets/img/pageimg/image.png" width="70px">
  </div>
</a>

步骤2：编写原生JS切换函数 #

function collapseboxtoggle(trigger) {
  // 这行等价于 jQuery 的 $(trigger).next()
  const targetElement = trigger.nextElementSibling;
  
  // 这里写你的折叠逻辑，比如切换类名控制显示/隐藏
  if (targetElement) {
    targetElement.classList.toggle('collapsed');
    // 也可以直接操作样式：
    // targetElement.style.display = targetElement.style.display === 'none' ? 'block' : 'none';
  }
}

2. 进阶：模拟jQuery .next(selector)的过滤功能 #

如果需要像$(trigger).next('.target-class')那样只匹配特定类名的下一个兄弟元素，可以在获取元素后做判断过滤：

function collapseboxtoggle(trigger) {
  let nextElement = trigger.nextElementSibling;
  
  // 遍历下一个兄弟元素，直到找到匹配选择器的目标
  while (nextElement) {
    // 用 matches() 方法判断是否符合目标选择器
    if (nextElement.matches('.target-class')) {
      break;
    }
    nextElement = nextElement.nextElementSibling;
  }
  
  if (nextElement) {
    // 对匹配到的元素执行折叠操作
    nextElement.classList.toggle('collapsed');
  }
}

3. 兼容旧浏览器（可选） #

如果需要兼容IE11这类不支持nextElementSibling或matches()的旧浏览器，可以自己封装一个工具函数：

function getNextSibling(element, selector) {
  let nextSibling = element.nextSibling;
  
  // 跳过非元素节点（文本、注释等）
  while (nextSibling && nextSibling.nodeType !== 1) {
    nextSibling = nextSibling.nextSibling;
  }
  
  // 如果有选择器，继续过滤匹配
  if (selector && nextSibling) {
    // 兼容旧浏览器的 matches 方法
    const matches = nextSibling.matches || nextSibling.msMatchesSelector;
    if (!matches.call(nextSibling, selector)) {
      return getNextSibling(nextSibling, selector);
    }
  }
  
  return nextSibling;
}

// 使用示例
function collapseboxtoggle(trigger) {
  const targetElement = getNextSibling(trigger, '.target-class');
  if (targetElement) {
    targetElement.classList.toggle('collapsed');
  }
}

小提示：推荐用事件委托替代内联事件 #

内联onClick虽然简单，但不利于代码维护，推荐用事件委托绑定事件，更灵活：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到父容器，绑定点击事件
  const container = document.querySelector('.collapse-boxes-column');
  container.addEventListener('click', function(e) {
    // 判断点击的是折叠触发按钮
    const trigger = e.target.closest('a[data-toggle="collapse"]');
    if (trigger) {
      const targetElement = trigger.nextElementSibling;
      targetElement.classList.toggle('collapsed');
    }
  });
});

对应的HTML改成：

<a data-toggle="collapse">
  <div class="icon-collapse-box">
    <img class="icon-collapse-icon" src="/assets/img/pageimg/image.png" width="70px">
  </div>
</a>

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