css - navegacion - menu pegajoso

El enfoque CSS no cambia de color luego de un segundo clic en el menú desplegable

Question

En el siguiente código, todo funciona bien, excepto que después de hacer clic en el botón la segunda vez que se abre el menú desplegable, el color no cambiará de rojo a azul. Alguna solución para esto por favor?

Gracias,
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

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

Answer 2

El problema es que está utilizando la pseudoclase de focus para establecer el color de fondo en rojo. Al hacer clic en un elemento que tiene foco no elimina el foco de ese elemento. Podría blur el elemento cuando se hace clic en él, pero tendría que haber una forma de determinar si el clic está activando el botón o desactivarlo.

Una solución más fácil sería simplemente usar una clase normal en lugar de tratar de aprovechar la pseudoclase de focus de esta manera. Como ya tiene un controlador de eventos de clic de JS, puede poner código allí para alternar una clase en el botón, especificando si se ha hecho clic o no, y luego usar esa clase para establecer el fondo rojo. También deberá eliminar esa clase del botón del manejador de clic de la ventana, ya que simplemente al quitar el foco ya no se revertirá el color de fondo del botón. Es posible que desee ver cómo hice esto para obtener algunos consejos sobre cómo podría mejorar el código que ya tenía en el controlador de clic de ventana.

 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

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 = "";
}
}

y luego puedes eliminar esto de CSS:

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

Aquí está el ejemplo de CodePen .

o cambie su HTML para que el efecto se pueda lograr usando CSS puro.