咨询：Bootstrap导航项展开时切换Glyphicon类的实现方法

嘿，这个需求其实很好实现，Bootstrap的下拉组件本身就自带了对应的事件，我们只需要监听这些事件来切换图标类就行，不用自己写复杂的状态判断逻辑。

步骤1：整理你的HTML结构 #

先把菜单结构调整得更规范一点（如果你的原有结构不想改动也没关系，核心逻辑不受影响）：

<li>
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    main item 
    <span class="pull-left glyph-btn-menu">
      <em class="glyphicon glyphicon-menu-down"></em>
    </span>
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">sub item1</a>
    <a class="dropdown-item" href="#">sub item2</a>
    <a class="dropdown-item" href="#">sub item3</a>
  </div>
</li>

我把原来的<br>换成了Bootstrap官方推荐的.dropdown-item类，这样子菜单的样式会更贴合Bootstrap的设计，如果你坚持用原有格式，直接保留<br>和文本就行。

步骤2：用jQuery监听下拉事件切换图标 #

因为Bootstrap的下拉组件依赖jQuery，我们直接用它来监听show.bs.dropdown（展开时触发）和hide.bs.dropdown（收起时触发）这两个事件：

// 下拉展开时，把向下图标换成向上
$('#navbarDropdown').on('show.bs.dropdown', function () {
  $(this).find('.glyphicon')
    .removeClass('glyphicon-menu-down')
    .addClass('glyphicon-menu-up');
});

// 下拉收起时，换回向下图标
$('#navbarDropdown').on('hide.bs.dropdown', function () {
  $(this).find('.glyphicon')
    .removeClass('glyphicon-menu-up')
    .addClass('glyphicon-menu-down');
});

进阶：多个下拉菜单的通用写法 #

如果你的页面有多个这样的下拉菜单，不想一个个写ID的话，可以给所有下拉按钮加个自定义类（比如custom-dropdown-toggle），然后用类选择器绑定事件，还能用toggleClass简化代码：

<!-- 给下拉按钮加自定义类 -->
<a class="nav-link dropdown-toggle custom-dropdown-toggle" href="#" ...>

$('.custom-dropdown-toggle').on('show.bs.dropdown hide.bs.dropdown', function () {
  $(this).find('.glyphicon').toggleClass('glyphicon-menu-down glyphicon-menu-up');
});

这样不管是展开还是收起，只要触发对应的事件，就会自动切换两个图标的类，代码更简洁。

注意事项 #

• 确保你的页面已经正确引入了jQuery和Bootstrap JS，顺序必须是先jQuery，再Bootstrap JS，否则事件监听会失效。
• 如果你的项目用的是Bootstrap 4+，要注意Glyphicon已经从官方包中移除了，你需要自己引入Glyphicon的CSS文件，或者换成Bootstrap Icons。

内容的提问来源于stack exchange，提问作者Johny D Good