CSS focus does not change color after second clicking on dropdown menu

Question

In the below code everything functions OK, except that after clicking on the button second time after dropdown opens, the color won't turn from red to blue. Any solutions to this please?

Thanks,
CP

    function dropdown_one() {
      document.getElementById("menu_list").classList.toggle("dcontent");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.button')) {

        var menu = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < menu.length; i++) {
          var open_list = menu[i];
          if (open_list.classList.contains('dcontent')) {
            open_list.classList.remove('dcontent');
          }
        }
      }
    }

.button {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.button:hover {
  background-color: green;
}
.button:focus {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #efefef;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: grey
}
.dcontent {
  display: block;
}

<div class="dropdown">
  <button onclick="dropdown_one()" class="button">Dropdown</button>
  <div id="menu_list" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 1

function dropdown_one() {
    document.getElementById("menu_list").classList.toggle("dcontent");
    if ( document.getElementById("menu_list").offsetParent !== null ) {
      document.querySelector(".button").style.backgroundColor = "red";
    } else {
      document.querySelector(".button").style.backgroundColor = "";
    }
}

and then can remove this from CSS:

.button:focus {
    background-color: red;
}

Here is CodePen example.

or change your HTML so that the effect can be achieved using pure CSS.

Answer 2

The problem is that you're using the focus pseudo-class to set the background color to red. Clicking on an element that has focus doesn't remove focus from that element. You could potentially blur the element when it's clicked, but you'd have to have a way to determine if the click is activating the button or deactivating it.

An easier solution would be to just use a normal class rather than trying to leverage the focus pseudo-class in this way. Since you already have a JS click event handler, you can just put code in there to toggle a class on the button specifying if it's been clicked or not, and then use that class to set the red background. You'll need to remove that class from the button in the window click handler as well, since just removing the focus will no longer revert the button's background color. You might want to look at how I did this for some hints on how you might improve the code you already had in the window click handler, as well.

    function dropdown_one(btn) {
      document.getElementById("menu_list").classList.toggle("dcontent");
      btn.classList.toggle("button-selected");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.button')) {

        var menu = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < menu.length; i++) {
          var open_list = menu[i];
          if (open_list.classList.contains('dcontent')) {
            open_list.classList.remove('dcontent');
          }
        }

        let selected = document.getElementsByClassName("button-selected");
        for (let i = 0, len = selected.length; i < len; i++) {
          selected[i].classList.remove("button-selected");
        }
      }
    }

.button {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.button:hover {
  background-color: green;
}
.button-selected,
.button-selected:hover {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #efefef;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: grey
}
.dcontent {
  display: block;
}

<div class="dropdown">
  <button onclick="dropdown_one(this)" class="button">Dropdown</button>
  <div id="menu_list" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 3

.button {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  font-family: sans-serif;
}
.button:hover {
  background-color: green;
}
.button:focus {
  background-color: red;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #efefef;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: grey
}
.dcontent {
  display: block;
}
#butt {
  display: none;
}
label {
  display: inline-block;
}
#butt:checked ~ label .button {
  background-color: red;
}
#butt:checked ~ .dropdown-content {
  display: block;
}

<div class="dropdown">
  <input type="checkbox" id="butt">
  <label for="butt">
    <div class="button">Dropdown</div>
  </label>
  <div id="menu_list" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>