¿Por qué hacer doble clic para mostrar/ocultar el botón en el primer uso?

En una página web, un botón está destinado a mostrar u ocultar un elemento, pero requiere un doble clic en su invocación inicial. Tras examinarlo, se encuentra que el código del botón es:

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

El problema surge del estado inicial del elemento con ID "menú". De forma predeterminada, la propiedad de visualización del elemento está establecida en "ninguna" en el CSS. Cuando se llama a la función showhidemenu() por primera vez, se realiza la siguiente verificación:

if (x.style.display === "none")

Esta verificación se evalúa como verdadero porque la propiedad de visualización inicial del elemento es "ninguna". En consecuencia, la visualización del elemento se establece en "bloqueo". Sin embargo, en el siguiente clic, la propiedad de visualización se establece en "ninguno" como se esperaba.

Para solucionar este problema, la propiedad de visualización inicial del elemento se debe establecer en "vacío" en lugar de "ninguno". Hacerlo garantiza que la verificación en la función se evalúe correctamente en el primer clic.

if (x.style.display === "none" || x.style.display === "")

Con esta modificación, el botón mostrará el elemento en el primer clic, como se esperaba.