如何用JS点击js--i类li元素切换箭头图标类？多实例需遍历吗？

嘿，其实不用特意遍历所有子元素哒！你的需求很明确——点击每个带.js--i类的<li>，切换它内部箭头的ion-android-arrow-dropdown和ion-android-arrow-dropup类，而且页面存在多个这类实例，我给你分享两种简洁的实现方式：

核心思路 #

每个.js--i的<li>里只会有一个箭头图标（<i>标签），所以我们只需要在点击li时，精准定位到它下面的那个<i>元素，直接切换两个类即可，完全不需要遍历所有子元素。

代码实现 #

1. 直接给每个目标元素绑定点击事件 #

这种方式适合页面元素固定、不会动态新增的场景：

<!-- 示例HTML（多个实例） -->
<li class="js--i">
  <a href="#" id="sub-menu--parent-1">About Us <i class="ion-android-arrow-dropdown"></i></a>
</li>
<li class="js--i">
  <a href="#" id="sub-menu--parent-2">Our Services <i class="ion-android-arrow-dropdown"></i></a>
</li>

// 获取所有带.js--i类的li元素
const toggleItems = document.querySelectorAll('.js--i');

// 给每个li绑定点击事件
toggleItems.forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    // 精准找到当前li下的i元素
    const arrowIcon = this.querySelector('i');
    // 切换两个箭头类
    arrowIcon.classList.toggle('ion-android-arrow-dropdown');
    arrowIcon.classList.toggle('ion-android-arrow-dropup');
  });
});

2. 事件委托（更推荐，支持动态新增元素） #

如果页面后续会动态添加.js--i的li，用事件委托更高效，只需要给父容器绑定一次事件：

// 假设父容器是ul（根据你的实际DOM结构调整）
document.querySelector('ul').addEventListener('click', function(e) {
  // 找到触发事件的目标li（点击a标签或i标签都能定位到对应的li）
  const targetLi = e.target.closest('.js--i');
  if (targetLi) {
    e.preventDefault();
    const arrowIcon = targetLi.querySelector('i');
    arrowIcon.classList.toggle('ion-android-arrow-dropdown');
    arrowIcon.classList.toggle('ion-android-arrow-dropup');
  }
});

为什么不用遍历子元素？ #

querySelector会在当前元素的范围内查找匹配的子元素，我们直接用this.querySelector('i')或者targetLi.querySelector('i')，就能精准拿到当前li下的箭头图标，不用循环遍历所有子节点，代码简洁又高效。

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