引导下拉菜单按钮在单击按钮以及单击屏幕时更改

Posted 2023-02-22

【中文标题】引导下拉菜单按钮在单击按钮以及单击屏幕时更改

【英文标题】：bootstrap dropdown menu button change when clicked on button and also when clicked on the screen

【发布时间】：2021-06-21 22:07:27

【问题描述】：

我有这个引导下拉菜单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
    
  

【问题讨论】：

如何使用#dropdownMenuButton[aria-expanded="true"]作为选择器直接从开关设置样式并从中添加颜色和背景颜色？

我们想改变class="dropdown"而不是#dropdownMenuButton的背景颜色

【参考方案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>

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