点击时如何将fa-angle-left图标替换为fa-angle-down图标

核心逻辑是监听.js-arrow元素的点击事件，动态切换目标图标的fa-angle-left和fa-angle-down类即可，同时可搭配子菜单显隐控制，兼容多菜单场景。

方案1：原生JavaScript实现（无第三方依赖） #

document.addEventListener('DOMContentLoaded', function() {
  // 绑定所有带箭头的可点击菜单
  const menuTriggers = document.querySelectorAll('.js-arrow');

  menuTriggers.forEach(trigger => {
    trigger.addEventListener('click', function(e) {
      // 阻止a标签默认跳转
      e.preventDefault();
      // 定位当前菜单内的箭头图标
      const arrowIcon = this.querySelector('.pull-right.fas');
      // 切换两个图标类
      arrowIcon.classList.toggle('fa-angle-left');
      arrowIcon.classList.toggle('fa-angle-down');

      // 可选：同步控制子菜单展开收起
      const subMenu = this.nextElementSibling;
      if (subMenu.classList.contains('js-sub-list')) {
        subMenu.classList.toggle('show');
      }
    })
  })
})

如果需要配合子菜单默认隐藏，添加如下CSS即可：

.js-sub-list {
  display: none;
}
.js-sub-list.show {
  display: block;
}

方案2：jQuery实现（适合已引入jQuery的项目） #

代码更简洁，可直接使用：

$(document).ready(function() {
  $('.js-arrow').click(function(e) {
    e.preventDefault();
    // 切换箭头类
    $(this).find('.pull-right.fas').toggleClass('fa-angle-left fa-angle-down');
    // 可选：切换子菜单显隐
    $(this).next('.js-sub-list').toggle();
  })
})

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