单击 Bootstrap 时如何更改下拉按钮的颜色？

Question

我安装了这个 Bootstrap 下拉按钮 https://getbootstrap.com/docs/4.0/components/dropdowns/（第二个带有 "a" 元素，所以我的“按钮”实际上是一个链接）并且一切正常，除非我尝试单击按钮时更改按钮的背景颜色；它仍然是按钮附带的默认灰色以及出现的浅灰色边框。我想在单击按钮时更改背景颜色。

这是我的代码：

（只是为了`解释一下，我的 html 在 li 中，因为我使用下拉按钮作为导航的菜单项，并且我使用的是 span 而不是div 因为它只会与 span 正确对齐，而不是形成一个块。）

html:

<span class="dropdown show">

    <li>

        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 
        id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" 
        aria-expanded="false" onclick="myFunction()">Help</a>

    <span class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </span>
    </li>
</span>

CSS：

    #color-change {
    background-color: #00ffba;
}

Javascript：

    function myFunction() {
    document.getElementById("color-change");
} 

我在网上查看并尝试了其他在单击时更改背景颜色的方法，但无济于事，我认为这可能与干扰 Javascript 的 list 元素和/或 span 元素有关，以及干扰使用 Bootstrap，但我的 Javascript 也可能是错误的。

谢谢！

`

Answer 1

此代码将为您工作。为您更改 ID 和颜色。

$('body').on('click', '#id-of-button-to-change-background', function(){

    $(this).css('background-color', 'colour-to-change-will-go-here');

})

Answer 2

您可以通过简单的 CSS 实现这一点。在标签中添加一个类。

 <a class="btn btn-secondary dropdown-toggle customButton" href="#" role="button"
       id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
       aria-expanded="false">Help</a>

CSS

.show > .customButton:focus{
background: #00ffba !important ;
  box-shadow:none !important;
  border: none !important;

}
.customButton{
  box-shadow:none !important;
  border: none !important;
}

如果您希望所有 btn-secondary 在单击时都具有相同的颜色，则可以将 css 直接添加到该类，如下所示：

.show > .btn-secondary:focus{
background: #00ffba !important ;
  box-shadow:none !important;
  border: none !important;

}
.btn-secondary{
  box-shadow:none !important;
  border: none !important;
}

Codepen 链接：https://codepen.io/anon/pen/xzWrYr