如何通过Chrome开发者工具定位DOM元素并修复jQuery菜单图标切换失效问题

问题1解答 #

Chrome开发者工具「元素面板」中展示DOM节点的对应行官方名称为 DOM节点条目（DOM Node Entry），官方文档里也会将这一区域统称为DOM树节点视图行。

问题2解答 #

问题原因 #

你写的代码没有生效的核心原因是选择器和实际DOM结构不匹配：
你的代码中选择器为$('li.active').find('span.fa-chevron-right.rotate')，但从你提供的HTML结构可见，菜单下的chevron图标默认带的类是fa-chevron-down，没有fa-chevron-right和rotate类，导致选择器匹配不到任何元素，因此既不会报错也不会产生预期效果。

修复方案 #

你可以通过判断子菜单的显隐状态来切换对应chevron的图标类，参考代码如下：

$(document).ready(function() {
  // 遍历所有侧边菜单项
  $('.nav.side-menu > li').each(function() {
    const $subMenu = $(this).find('.child_menu');
    const $chevron = $(this).find('> a > span.fa[class*="fa-chevron"]');
    // 子菜单展开时，图标为向下；收起时为向右
    if ($subMenu.is(':visible')) {
      $chevron.removeClass('fa-chevron-right').addClass('fa-chevron-down');
    } else {
      $chevron.removeClass('fa-chevron-down').addClass('fa-chevron-right');
    }
  })
})

如果你的图标方向是通过rotate旋转类实现的，把上面切换fa-chevron-*类的逻辑改成切换rotate类即可。

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