Bootstrap 5.0切换轮廓按钮二次点击无法即时恢复透明状态的问题咨询

这个问题的核心是按钮点击后会保留:focus状态，Bootstrap默认的btn-outline-dark焦点样式与切换后的激活状态样式叠加，导致视觉上无法即时看到透明状态的恢复。以下是几种可行的解决方法：

方法1：自定义CSS覆盖焦点样式 #

添加自定义CSS规则，当按钮处于焦点但未激活时，重置样式为初始状态：

.btn-outline-dark:focus:not(.active) {
  background-color: transparent;
  border-color: #212529;
  box-shadow: none;
}

这样第二次点击按钮后，即使按钮仍处于焦点状态，也会显示透明的轮廓样式，无需点击页面其他区域。

方法2：点击后手动移除按钮焦点 #

通过JavaScript在按钮点击时移除焦点，避免:focus样式干扰状态切换：

内联写法 #

<button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" aria-pressed="false" onclick="this.blur();">
  {{mode}} Mode
</button>

事件监听写法 #

const toggleButton = document.querySelector('.btn-outline-dark[data-bs-toggle="button"]');
toggleButton.addEventListener('click', function() {
  this.blur(); // 移除按钮焦点
});

点击按钮后调用blur()方法，让按钮失去焦点，状态切换的视觉效果会立即呈现。

方法3：手动同步按钮状态类 #

如果模板变量{{mode}}的更新与按钮状态不同步，可手动控制active类和aria-pressed属性：

const toggleButton = document.querySelector('.btn-outline-dark[data-bs-toggle="button"]');
toggleButton.addEventListener('click', function() {
  this.classList.toggle('active');
  const isPressed = this.classList.contains('active');
  this.setAttribute('aria-pressed', isPressed);
  this.blur();
});

配合自定义CSS确保激活状态样式正确：

.btn-outline-dark.active {
  background-color: #212529;
  border-color: #212529;
  color: #ffffff;
}

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