JavaScript: Ändern onClick Wert von Hyperlinks

Question

Ich versuche, eine Schaltfläche/einen Hyperlink zu machen, die in der Lage ist, meine Navigationsleiste zu verbergen und anzuzeigen. Zuerst ist es versteckt und wenn ich auf das a-Element klicke ändert sich der Stil und ist sichtbar. Aber es wird es beim zweiten Klick nicht mehr verstecken. Der Hyperlink ist sichtbar, wenn min-width: 480 falsch ist (nur für Handys und kleine Browserfenster).

Ich versuchte, den onClick Wert über Javascript zu ändern. Ich werde es unten zeigen.

\t \t <script type="text/javascript"> 
 
\t \t \t function showNavBar() { 
 
\t \t \t \t document.getElementById("navigationBar").style.display = "block"; 
 
\t \t \t \t document.getElementById("navigationBar").onClick = function() { hideNavBar(); }; 
 
\t \t \t } 
 
\t \t \t function hideNavBar() { 
 
\t \t \t \t document.getElementById("navigationBar").style.display = "none"; 
 
\t \t \t \t document.getElementById("navigationBar").onClick = function() { showNavBar(); }; 
 
\t \t \t } 
 
\t \t </script> 
 
... 
 
\t \t <a href="javascript:void(0);" onclick="showNavBar();" class="mobileShow">MenuButton</a> 
 
\t \t 
 
\t \t <nav id="navigationBar" class="main"> <!-- begin navigation bar --> 
 
\t \t \t <ul id="navigationList" class="icon-list"> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-menu" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Menu</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-highscore" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Highscore</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-facebook" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Facebook</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <a href=""> 
 
\t \t \t \t \t \t <span class="nav-icon"> 
 
\t \t \t \t \t \t \t <i aria-hidden="true" id="icon-legalnotice" class="nav-icon"></i> 
 
\t \t \t \t \t \t </span> 
 
\t \t \t \t \t \t <span>Legal Notice</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> \t \t \t 
 
\t \t \t </ul> 
 
\t \t </nav> <!-- end navigation bar --> 
 
\t \t <section class="main"> 
 
      ... 
 
\t \t </section> 
 
\t </body> 
 
</html>

Ich habe auch versucht, ähnliche Sachen mit setAttribute() und mit dem Attribut href die Funktionen mit dem gleichen Ergebnis zu nennen. Ich verstehe nicht, warum es nicht funktioniert, nachdem der onClick Wert einmal geändert wird. Ich bin verzweifelt um Hilfe.

Prost.

Answer 1

Sie verwenden jQuery Angenommen, Sie .toggle() Methode verwenden:

function toggleNavbar() 
{ 
    $("#navigationBar").toggle(); 
} 

<a href="javascript:void(0);" onclick="toggleNavbar();" class="mobileShow">MenuButton</a> 

Jedes Mal Sie klicken, wird es entweder ein- oder ausblenden es je nach welchem ​​Zustand er ist.

---

Sie Angenommen, sie nicht verwenden jQuery:

function toggleNavbar() 
{ 
    var navbar = document.getElementById("navigationBar"); 
    if (navbar.style.display == 'block' || navbar.style.display=='') 
    { 
     navbar.style.display = 'none'; 
    } 
    else 
    { 
     navbar.style.display = 'block'; 
    } 
} 

<a href="javascript:void(0);" onclick="toggleNavbar();" class="mobileShow">MenuButton</a> 

Answer 2

Nur 1 Funktion benötigt

<script>    
     function showHideNavBar() { 
     var myStyle = document.getElementById("navigationBar").offsetLeft; 

     // check if menu is hidden 
     if(myStyle < 0){ 
      document.getElementById("navigationBar").style.display = "block"; 
     } else { 
      document.getElementById("navigationBar").style.display = "none"; 
     } 
    } 
    </script> 
    <a href="javascript:void(0);" onclick="showHideNavBar();" class="mobileShow">MenuButton</a> 

Answer 3

Mögliche Lösung wäre:

<script type="text/javascript"> 
    var el = document.getElementById("navigationBar"); 
    el.addEventListener("click", function(){ 
     if (el.style.display === "block") { 
      el.style.display = "none"; 
     } else { 
      el.style.display = "block"; 
     } 
    }); 
</script>