Div nicht verschwinden, obwohl klar gesagt wird (javascript)

Question

echo "<div id=\"userinfo\"><p><strong>$username</strong></p><p>Bids: <strong>$bids</strong></div> 
      <script> 

       var usn = document.getElementById('userstuff'); 
       menu = document.getElementById('userinfo'); 
       if (usn) 
       { 
        usn.addEventListener('click',toggle_menu); 
       } 


       function toggle_menu() 
       { 
        alert('clicked'); 
        if (menu.style.display == '') 
        { 
         menu.style.display='block'; 
        } 
        else if (menu.style.display == 'block') 
        { 
         menu.style.display=''; 
        } 
       } 

      </script>"; 

Dieser Code funktioniert auf den ersten Klick. Standardmäßig ist der Anzeigewert im Menü auf 'none' eingestellt. Beim ersten Klick wird der Benutzer "angeklickt" und das Menü wird sichtbar. Bei mehr Klicks wird der Benutzer jedoch "angeklickt", aber das Menü wird nicht unsichtbar und die "versteckte" Warnung wird nicht angezeigt.

Answer 1

Denken Sie daran, dass = für Zuweisung ist, verwenden Sie == zum Vergleich. Ein weiteres Problem besteht darin, dass die Überprüfung menu.style.display prüft nur Inline-Styles des Knotens, wie zum Beispiel:

<div style="display: none"></div> 

So, wenn der Stil nicht Vergleich gesetzt wird fehlschlagen. '' Vergleich statt 'none' funktioniert, weil die Eigenschaften standardmäßig leere Zeichenfolgen sind, wenn nicht festgelegt, gesehen here.

Noch ein paar andere Empfehlungen: Deklarieren Sie Ihre Variablen immer mit var, um globale Verschmutzung durch viele globale Variablen zu vermeiden. Hier ist das letzte JavaScript:

var usn = document.getElementById('userstuff'), 
    menu = document.getElementById('userinfo'); 

if (usn) { 
    usn.addEventListener('click', toggle_menu); 
} 

function toggle_menu() { 
    alert('clicked'); 

    if(menu.style.display == '' || menu.style.display == 'none') { 
     menu.style.display = 'block'; 
     return; 
    } else if (menu.style.display == 'block') { 
     menu.style.display = 'none'; 
     return; 
    } 
}