Erweitern des Menüs reagiert nicht

Question

Ich versuche, ein mobiles Menü in einem WordPress-Unterthema (von Twentyseventeen) zu beheben, das nicht mehr erweitert wird, wenn auf "Menü" geklickt wird. Im Grunde musste ich den Header auseinander reißen, um Dinge herum zu bewegen und jetzt wird das erweiterte Aria-Menü nicht erkannt. Stattdessen versuche ich Javascript zu verwenden, um die Anzeigeeigenschaft der ul von none zu blockieren, aber das funktioniert auch nicht - hauptsächlich, weil ich nicht das erste Ding über js weiß und ich gerade versucht habe, etwas von zu machen Bits und Teile des Codes.

Die Demo von der Stelle, an http://www.histeve.co.uk/testing/triangledrivertraining/

Das Javascript ist live Ich versuche, ist wie folgt zu verwenden:

<script> 
var element = document.getElementById("topMenu"); 
document.getElementById("navBtn").addEventListener("click", toggleNav); 

function toggleNav() { 
if(element.style.display == 'none') { 
function show() {('#topMenu').css ('display:block');} 
} else { 
function hide() {('#topMenu').css ('display:none'); }} 
} 
</script> 

Dies wird nicht mehr Fehler treten, aber es tut nichts an alle.

Wenn jemand irgendwelche Ideen hat, wird Ihre Hilfe sehr geschätzt!

Dank Steve

Answer 1

Try this:

<script> 
    var $topMenu = jQuery("#topMenu"); 
    jQuery("#navBtn").click(toggleNav); 

    function toggleNav() { 
     if($topMenu.is(":visible")) { 
      $topMenu.hide(); 
     } else { 
      $topMenu.show(); 
     } 
    } 
</script> 

UPDATE:

immer um das Menü auf dem Desktop zeigen Sie mit dieser Lösung gehen sollte:

In folgenden Stile auf Ihre Seite:

<style> 
    @media (max-width: 768px) { 
     .menu-navigation-container { 
      display: none; 
     } 
     .menu-navigation-container.show-on-mobile { 
      display: block; 
     } 
    } 
</style> 

hinzufügen Verwendung dieses JS:

<script> 
    var $topMenu = jQuery(".menu-navigation-container"); 
    jQuery("#navBtn").click(function(){ 
     $topMenu.toggleClass("show-on-mobile"); 
    }); 
</script> 

Answer 2

Sie sollten beide Wähler beheben, die mit $ beginnen sollte (da es Wordpress ist, dass Sie auf Benutzer jquery statt $ haben könnte) sowie Ihre CSS-Funktion wie folgt.

<script> 
var element = document.getElementById("topMenu"); 
document.getElementById("navBtn").addEventListener("click", toggleNav); 

function toggleNav() { 
if(element.style.display == 'none') { 
function show() {$('#topMenu').css ('display','block');} 
} else { 
function hide() {$('#topMenu').css ('display','none'); }} 
} 
</script> 

Alternative

Statt css verwenden Sie können Klasse wechseln, die

function toggleNav() { 
    $('#topMenu').toggleClass('active'); 
} 

dann

in css viel einfacher ist

#topMenu{display: none;} 

#topMenu.active{display: block;}