如何在菜单展开时替换图标？自定义JS代码失效求助

首先看你贴的代码，明显有个小失误——hide.bs.collapse事件的处理代码没写完：removeClass("fa-times...这里截断了，应该补全成removeClass("fa-times").addClass("fa-bars")，这是最直观的错误。不过就算补全了，可能还有其他潜在问题，我给你一步步排查和修复：

一、先修正代码的语法错误 #

你的原代码后半部分不完整，先把代码补全：

$('#navbar-collapse-first').on('show.bs.collapse', function () {
  $(this).find('.navbar-toggle-first svg').removeClass("fa-bars").addClass("fa-times");
}); 
$('#navbar-collapse-first').on('hide.bs.collapse', function () {
  $(this).find('.navbar-toggle-first svg').removeClass("fa-times").addClass("fa-bars");
});

二、排查其他可能导致失效的原因 #

1. 确认元素选择器是否正确 #

• 检查.navbar-toggle-first这个按钮是不是不在#navbar-collapse-first这个折叠容器里面？如果按钮是在容器外面（比如常见的Bootstrap布局里，切换按钮和折叠菜单是兄弟元素），那$(this).find(...)就找不到元素，因为find是找后代元素。这种情况要改成直接选择按钮：

// 把$(this).find(...)换成直接选择器
$('.navbar-toggle-first svg').removeClass("fa-bars").addClass("fa-times");

• 用浏览器开发者工具（F12）检查元素ID和类名有没有拼写错误，比如大小写、多了/少了字符。

2. 确认jQuery和Bootstrap的加载顺序 #

• 必须先加载jQuery，再加载Bootstrap的JS文件，否则Bootstrap的折叠事件无法正常绑定。
• 确保你的代码是在DOM加载完成后执行的，比如把代码放在$(document).ready()里面：

$(document).ready(function() {
  // 把你的折叠事件代码放在这里
  $('#navbar-collapse-first').on('show.bs.collapse', function () {
    $('.navbar-toggle-first svg').removeClass("fa-bars").addClass("fa-times");
  }); 
  $('#navbar-collapse-first').on('hide.bs.collapse', function () {
    $('.navbar-toggle-first svg').removeClass("fa-times").addClass("fa-bars");
  });
});

3. 确认Bootstrap版本兼容性 #

• 如果是Bootstrap 5，它已经不再依赖jQuery了，而且事件名称和API有变化，比如折叠事件还是show.bs.collapse和hide.bs.collapse，但如果你用的是Bootstrap 5的原生JS，那jQuery的写法可能不生效，这时候要改成原生JS的写法：

document.addEventListener('DOMContentLoaded', function() {
  const collapseElement = document.getElementById('navbar-collapse-first');
  const toggleIcon = document.querySelector('.navbar-toggle-first svg');
  
  collapseElement.addEventListener('show.bs.collapse', function() {
    toggleIcon.classList.remove('fa-bars');
    toggleIcon.classList.add('fa-times');
  });
  
  collapseElement.addEventListener('hide.bs.collapse', function() {
    toggleIcon.classList.remove('fa-times');
    toggleIcon.classList.add('fa-bars');
  });
});

4. 检查是否有其他JS代码冲突 #

• 看看页面里有没有其他JS修改了这个图标的类名，或者阻止了事件冒泡。可以暂时禁用其他自定义JS，只保留这段折叠图标切换的代码，测试是否生效。

三、验证方法 #

修改完代码后，刷新页面，打开浏览器开发者工具的控制台（F12 -> Console），看看有没有报错信息。如果有报错，根据错误提示进一步排查（比如“$ is not defined”就是jQuery没加载，“Cannot read property 'addEventListener' of null”就是元素找不到）。

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