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
– Rich DeBourke, Commented Mar 25, 2021 at 6:31
We want to change background color of class="dropdown" not #dropdownMenuButton — seyet
– seyet, Commented Mar 25, 2021 at 23:12

Rich DeBourke · Accepted Answer · 2021-03-25 23:35:05Z

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/[email protected]/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/[email protected]/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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related