Bootstrap带图标的下拉菜单实现Pause/Enable切换功能

实现步骤 #

要实现点击下拉菜单选项时切换Material Symbols图标与文字（Pause ↔ Enable），可以通过以下方式完成：

1. 构建HTML结构 #

结合Bootstrap下拉组件与Material Symbols图标，搭建基础菜单结构：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    操作菜单
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item toggle-action" href="#">
        <span class="material-symbols-outlined">pause</span>
        <span class="action-label">Pause</span>
      </a>
    </li>
    <!-- 可添加其他下拉选项 -->
  </ul>
</div>

注意：需确保已正确引入Bootstrap样式与脚本，以及Material Symbols字体资源。

2. 编写切换逻辑 #

使用原生JavaScript监听点击事件，根据当前状态切换图标与文字：

// 获取目标元素
const toggleAction = document.querySelector('.toggle-action');
const icon = toggleAction.querySelector('.material-symbols-outlined');
const label = toggleAction.querySelector('.action-label');

// 绑定点击事件
toggleAction.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认链接跳转行为
  
  // 判断当前状态并切换
  const isPause = label.textContent.trim() === 'Pause';
  if (isPause) {
    icon.textContent = 'play_arrow'; // 替换为Enable对应的Material图标
    label.textContent = 'Enable';
  } else {
    icon.textContent = 'pause';
    label.textContent = 'Pause';
  }
});

3. 可选：样式优化 #

如果需要调整图标与文字的间距，可添加简单CSS：

.toggle-action .material-symbols-outlined {
  margin-right: 8px;
  vertical-align: middle;
}

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