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

Question

I have this bootstrap dropdown here . What I want to do is to change the background color of the button to blue only when the dropdown menu is expanded. I achieve it by styling it through adding a click listener to the button but the issue is when the menu is expanded and the user clicks somewhere else, the menu goes hidden while the button is still blue. How can I modify it so the button is blue ONLY AND ONLY when the menu is expanded?

here is my code:

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

From your original description, it seemed like you wanted the button's background color to switch to blue whenever the button was activated and to change back to the normal color when either the button is reclicked or the user clicks somewhere else on the page. This code will do that:

 #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>

If you want to change the background color for the dropdown class (which is just the area behind the button – the dropdown itself is positioned absolutely and is separate), then you could use a MutationObserver on the switch and then change the background color for the parent dropdown div.