Warum doppelklicken Sie, um die Schaltfläche bei der ersten Verwendung ein-/auszublenden?

Auf einer Webseite ist eine Schaltfläche zum Ein- oder Ausblenden gedacht ein Element, erfordert jedoch beim ersten Aufruf einen Doppelklick. Bei der Untersuchung wurde festgestellt, dass der Code für die Schaltfläche wie folgt lautet:

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

Das Problem ergibt sich aus dem Anfangszustand des Elements mit der ID „menu“. Standardmäßig ist die Anzeigeeigenschaft des Elements im CSS auf „none“ gesetzt. Beim ersten Aufruf der Funktion showhidemenu() wird folgende Prüfung durchgeführt:

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

Diese Prüfung wird als wahr ausgewertet, da die anfängliche Anzeigeeigenschaft des Elements „none“ ist. Folglich wird die Anzeige des Elements auf „blockieren“ gesetzt. Beim nächsten Klick wird die Anzeigeeigenschaft jedoch wie erwartet auf „none“ gesetzt.

Um dieses Problem zu beheben, sollte die anfängliche Anzeigeeigenschaft des Elements auf „empty“ statt auf „none“ gesetzt werden. Dadurch wird sichergestellt, dass die Prüfung in der Funktion beim ersten Klick korrekt ausgewertet wird.

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

Mit dieser Änderung zeigt die Schaltfläche das Element wie vorgesehen beim ersten Klick an.