單擊Bootstrap時如何更改下拉按鈕的顏色？

Question

我安裝了這個Bootstrap下拉按鈕https://getbootstrap.com/docs/4.0/components/dropdowns/ （第二個帶有“ a”元素，所以我的“ button”實際上是一個鏈接），並且一切正常，除了當我嘗試更改單擊按鈕的背景色時； 它仍然是按鈕隨附的默認灰色以及顯示的淺灰色邊框。 我想在單擊按鈕時更改背景顏色。

這是我的代碼：

（只是解釋一下，我的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");
} 

我上網查看過，並嘗試過其他單擊時更改背景顏色的方法，但無濟於事，我認為這可能與list元素和/或span元素干擾Javascript以及干擾Bootstrap有關，但是我的Javascript也可能是錯誤的。

謝謝！

`

Answer 1

您可以通過簡單的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

Answer 2

該代碼將為您工作。 為您更改ID和顏色。

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

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

})