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');

})

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

2 个答案: