无需使用ID，能否仅对DOM中特定类的单个元素生效？

当然可以，完全不用ID就能实现这种“仅操作当前交互元素”的效果，核心是利用事件对象或this关键字定位当前元素，再结合DOM相对查找关联子元素（比如你的箭头图片），还能彻底消除重复代码。

步骤1：重构HTML结构（统一用类名，去掉ID） #

把所有同类元素统一加上相同的类，箭头图片也用类名标记，让结构形成父子关联：

<div class="port-item">
  <!-- 这里放你的内容 -->
  <img class="arrow" src="picnig/arrow1.png" alt="展开/收起箭头">
</div>
<div class="port-item">
  <!-- 这里放你的内容 -->
  <img class="arrow" src="picnig/arrow1.png" alt="展开/收起箭头">
</div>
<div class="port-item">
  <!-- 这里放你的内容 -->
  <img class="arrow" src="picnig/arrow1.png" alt="展开/收起箭头">
</div>

步骤2：用CSS类控制样式（替代直接操作style） #

把高度样式写在CSS类里，比直接修改元素style更易维护，还能加过渡动画：

.port-item {
  height: 60px;
  transition: height 0.3s ease; /* 平滑过渡效果 */
  /* 其他自定义样式 */
}
.port-item.expanded {
  height: 1000px;
}

步骤3：通用JavaScript逻辑（一个函数搞定所有元素） #

通过类选择器获取所有目标元素，循环绑定点击事件，用this指代当前被点击的元素，再相对查找箭头图片：

// 获取所有带port-item类的元素
const portItems = document.querySelectorAll('.port-item');

// 给每个元素绑定点击事件
portItems.forEach(item => {
  item.addEventListener('click', function() {
    // 切换expanded类，实现高度的展开/收起
    this.classList.toggle('expanded');
    
    // 找到当前元素下的箭头图片
    const arrow = this.querySelector('.arrow');
    
    // 根据元素是否展开，切换箭头图片
    arrow.src = this.classList.contains('expanded') 
      ? 'picnig/arrow2.png' 
      : 'picnig/arrow1.png';
  });
});

为什么这么做更好？ #

• 彻底摆脱ID依赖，不管新增多少个port元素，代码都不用修改
• 用CSS类控制样式，符合前端开发规范，样式和逻辑分离
• 消除重复代码，原来的exp1/exp2/exp3函数合并成一个通用逻辑
• 利用DOM相对查找，避免全局查找元素的性能问题

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