bootstrap 下拉菜单按钮在单击按钮时以及在屏幕上单击时发生变化

Question

我有这个 bootstrap 下拉菜单 here。我想要做的是仅在展开下拉菜单时将按钮的背景颜色更改为蓝色。我通过向按钮添加点击侦听器来设置它的样式来实现它，但问题是当菜单展开并且用户点击其他地方时，菜单隐藏而按钮仍然是蓝色的。我怎样才能修改它，使按钮在菜单展开时 仅且仅 呈蓝色？

这是我的代码：

//template
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" :style="test ? clickedBtn : null" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="testing()">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

//script
  data: {
    test: false,
    clickedBtn: {
      background: "blue",
      color: "white"  
    }
  },
  methods: {
    testing(){
        this.test = !this.test
    }
  }

Answer 1

根据您最初的描述，您似乎希望按钮的背景颜色在按钮被激活时切换为蓝色，并在按钮被重新单击或用户单击按钮上的其他位置时变回正常颜色页。此代码将执行此操作：

#dropdownMenuButton[aria-expanded="true"] {
    background-color: blue;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" :style="test ? clickedBtn : null" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="testing()">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

如果你想改变下拉菜单的背景颜色 class（这只是按钮后面的区域——下拉菜单本身是绝对定位的并且是独立的），那么你可以使用在开关上，然后更改父下拉菜单的背景颜色 div。

bootstrap 下拉菜单按钮在单击按钮时以及在屏幕上单击时发生变化

bootstrap dropdown menu button change when clicked on button and also when clicked on the screen

html

javascript

drop-down-menu

vue.js

bootstrap-4