クラスは動作しますが、ルールは有効ではありませんか？

Question

高さが0pxのナビゲーションdivがあります。ハンバーガーアイコンをクリックすると、高さ250pxのクラスが追加されます。私はイベントリスナーを使用して、アラートでテストされ、動作しているクリックを検出しています。 ToggleClass()は、クラスを追加するために使用されます。

開発者コンソールでは、クラスの高さが追加されていますが、divの高さは変更されていません。また、高さルールが取り消し線でもコンソールに検出/表示されていないことがわかります。ここで

はDEVコンソールからrelevent情報の画像は、次のとおりです。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

これは、CSSの特異性の問題です。 idは、classより高い特異性を有する。代わりにあなたのCSSでこれを使用してください。

#responsiveNav.mobNavHeight { 
    height: 250px; 
} 

しかし、私があなただったら、私は最初の場所でCSSを経由して要素をターゲットにするidを使用することはありません。 idをjavascriptでターゲットにするだけですが、CSSでは.responsiveNavのようなクラスを使用し、#responsiveNavスタイルをすべてそれに移動し、.mobNavHeightを使用して上書きします。このような。

<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; 
}