菜单展开时如何为页面body元素添加class？

我看你已经搭好了基础的下拉按钮结构，要实现点击时图标从加号切换到叉号的交互效果，咱们可以结合Bootstrap的下拉事件和Font Awesome的类切换来完成，下面是完整的可运行方案：

完整HTML结构 #

<!-- 固定在左下角的下拉按钮容器 -->
<div class="dropup fixed-bottom-left m-3">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="fa-4x">
      <span class="fa-layers fa-fw">
        <i class="fas fa-circle"></i>
        <i class="fa-inverse fas fa-plus" id="menu-icon"></i>
      </span>
    </div>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown-menu-action">
    <!-- 自定义你的菜单选项 -->
    <a class="dropdown-item" href="#">食谱推荐</a>
    <a class="dropdown-item" href="#">烹饪技巧</a>
    <a class="dropdown-item" href="#">食材选购指南</a>
  </div>
</div>

定位CSS（固定到左下角） #

.fixed-bottom-left {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

交互逻辑JavaScript #

// 获取按钮和图标元素
const dropdownBtn = document.getElementById('dropdown-menu-action');
const menuIcon = document.getElementById('menu-icon');

// 下拉菜单展开时切换为叉号图标
dropdownBtn.addEventListener('shown.bs.dropdown', function () {
  menuIcon.classList.remove('fa-plus');
  menuIcon.classList.add('fa-times');
});

// 下拉菜单收起时切换回加号图标
dropdownBtn.addEventListener('hidden.bs.dropdown', function () {
  menuIcon.classList.add('fa-plus');
  menuIcon.classList.remove('fa-times');
});

关键实现说明 #

• 给核心图标元素添加了id="menu-icon"，方便JavaScript精准定位操作
• 利用Bootstrap下拉组件自带的shown.bs.dropdown（菜单展开触发）和hidden.bs.dropdown（菜单收起触发）两个事件，完美匹配图标切换的时机
• 通过classList的add/remove方法，快速切换Font Awesome的图标类，实现视觉上的状态变化

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