Javascript 当单击按钮和在屏幕上单击时，引导下拉菜单按钮会更改

我有这个引导下拉列表。我想做的是，只有当下拉菜单展开时，才将按钮的背景色更改为蓝色。我通过在按钮上添加一个点击监听器来设计它的样式，但问题是当菜单被展开，用户点击其他地方时，菜单会隐藏，而按钮仍然是蓝色的。如何修改它，使按钮仅为蓝色，并且仅在菜单展开时才为蓝色

这是我的密码：

//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
    }
  }

//模板
下拉按钮
//剧本
数据：{
测试：错误，
点击BTN：{
背景：“蓝色”，
颜色：“白色”
}
},
方法：{
测试（）{
this.test=！this.test
}
}

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

#下拉菜单按钮[aria expanded=“true”]{
背景颜色：蓝色；
}

下拉按钮

使用

下拉菜单按钮[aria expanded=“true”]

作为选择器直接从开关设置样式，然后从中添加颜色和背景色怎么样？我们想更改

class=“dropdown”

而不是

#下拉菜单按钮的背景色