选择引导下拉项时，按钮文本消失

Question

我有一个引导下拉菜单。当我从下拉菜单中选择一个项目时，按钮的文本会更改为所选项目的文本值（在此答案的帮助下实现：https://stackoverflow.com/a/60029507/7061548）。

每当从下拉菜单中选择一个项目时，我都必须重新加载窗口，因为我更新了会话存储。这在页面重新加载后工作正常。但是在重新加载之前我有一个问题。当我单击下拉菜单中的某个项目时，菜单按钮会变为全绿色，并且按钮文本会在页面重新加载之前消失。

我发现如果我从按钮中删除类“btn-outline-success”，问题似乎就消失了。我曾尝试在各种元素上应用 css 样式，但未能成功解决问题。

这是我的代码：

HTML：

<div class="m-dropdown">
    <button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        {{selectedColor}}
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#" (click)="setColorGreen('Green')">Green</a>
      <a class="dropdown-item" href="#" (click)="setColorBlue('Blue')">Blue</a>
    </div>
</div>

TS：

...
selectedColor: string;

ngOnInit() {
    this.selectedColor = "Green";
}

setColorGreen(color: string) {
    this.selectedColor = "Green";
    ...
    window.location.reload();
}

setColorBlue(color: string) {
    this.selectedColor = "Blue";
    ...
    window.location.reload();
}
...

Answer 1

当我点击下拉菜单中的某个项目时，菜单按钮会变为全绿色，并且按钮文本会在页面重新加载之前消失。

当你点击按钮时，Bootstrap 会触发一些 JS 来触发下拉菜单。

它使用.dropdown-toggle 类和data-toggle="dropdown"：

<button type="button" class="btn btn-outline-succes m-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">

我猜 Bootstrap 将按钮标记为disabled，因此它可以防止双击。而且我猜您看到的样式更改是 Bootstrap 在 JS 中作为按钮单击功能的一部分进行的一些类更改的结果。

如果您在按钮上定义了任何 CSS，它可能与 Bootstrap 尝试执行的操作发生冲突。

查看单击Bootstrap's docs page 上的按钮的效果。你的变化是不是很眼熟？

您可以在 Chrome DevTools 中通过查看单击按钮时触发的内容来进一步测试这一点。然后在此处放置一个断点并单击按钮。

或者您可以使用 DevTools 强制按钮上的元素状态，以查看在不同状态下发生的情况（:active、:hover 等）。