Klasse toggle funktioniert, aber Regeln nicht wirksam?

Question

Ich habe ein Navigations-Div mit einer Höhe von 0px, wenn ich auf ein Hamburger-Symbol klicke, möchte ich eine Klasse mit 250px Höhe hinzufügen. Ich verwende einen Ereignis-Listener, um den Klick zu erkennen, der mit einer Warnung getestet wurde und funktioniert. ToggleClass() wird dann verwendet, um die Klasse hinzuzufügen.

In der Entwickler-Konsole kann ich die Klasse Ebing hinzugefügt sehen, aber die Höhe des div ändert sich nicht und Sie können auch sehen, dass die Höhe Regel in der Konsole nicht erkannt/angezeigt wird, auch mit einem Durchgestrichenen. Hier

ist ein Bild von den relevent Informationen von dev-Konsole: https://gyazo.com/900f858cbfc41e9e8bfe00eb9fd8f1cb

styles.css:

#responsiveNav { 
    position: absolute; 
    right: 0; 
    width: 200px; 
    height: 0px; 
    text-align: center; 
    background-color: rgba(28, 28, 27, 0.8); 
    color: #009641; 
    margin-top: 100px; 
    overflow: hidden; 
    z-index: 1500; 
    transition: all 0.8s ease; 
} 

.mobNavHeight { 
    height: 250px; 
} 

JS:

$(document).ready(function() { 
    var hamburgerBtn = document.getElementById("hamburgerBtn"); 

//DISPLAY MOBILE NAVIGATION ON HAMBURGER CLICK 
    function displayMobNav() { 
     alert("working"); 
     $('#responsiveNav').toggleClass("mobNavHeight"); 
    } 

//EVENT LISTENERS 
    hamburgerBtn.addEventListener("click", displayMobNav); 


}); //Doc Ready 

Answer 1

Es ist ein CSS Spezifität Problem. Eine id hat eine höhere Spezifität als eine class. Verwenden Sie dies stattdessen in Ihrem CSS.

#responsiveNav.mobNavHeight { 
    height: 250px; 
} 

Aber wenn ich du wäre, würde ich nicht ein id verwenden, um ein Element über CSS in erster Linie zum Ziel. Verwenden Sie nur die id, um in Javascript zu zielen, aber in CSS verwenden Sie einfach eine Klasse wie .responsiveNav, verschieben Sie alle #responsiveNav Stile zu diesem, dann verwenden Sie .mobNavHeight, um es zu überschreiben. So was.

<nav id="responsiveNav" class="responsiveNav">nav</nav> 

.responsiveNav { 
    position: absolute; 
    right: 0; 
    width: 200px; 
    height: 0px; 
    text-align: center; 
    background-color: rgba(28, 28, 27, 0.8); 
    color: #009641; 
    margin-top: 100px; 
    overflow: hidden; 
    z-index: 1500; 
    transition: all 0.8s ease; 
} 

.mobNavHeight { 
    height: 250px; 
}