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

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

What about setting the style directly from the switch using `#dropdownMenuButton[aria-expanded="true"]` as the selector and add the color and background color from that? — Rich DeBourke, Mar 25 '21 at 06:31
We want to change background color of `class="dropdown"` not `#dropdownMenuButton` — seyet, Mar 25 '21 at 23:12

score 1 · Accepted Answer · answered Mar 25 '21 at 23:35

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.

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

1 Answers1