類切換工作但規則不起作用？

我有一個高度爲0px的導航div，當我點擊一個漢堡包圖標時，我想要添加一個250px高度的類。我正在使用事件偵聽器來檢測用警報和工作進行測試的點擊。然後使用ToggleClass()添加類。類切換工作但規則不起作用？

在開發者控制檯中，我可以看到添加的ebing類，但是div的高度沒有變化，並且您還可以看到即使使用刪除線，控制檯中也未檢測到/顯示高度規則。

下面是從開發者控制檯的培訓相關信息的圖像：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

來源

2017-04-23 Xander

這是一個CSS具體問題。 id比class具有更高的特異性。相反，在你的CSS中使用它。

#responsiveNav.mobNavHeight { 
    height: 250px; 
}

但是，如果我是你，我不會用一個id目標通過CSS的元素擺在首位。只有使用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; 
}

來源

2017-04-23 14:57:08

Thanks @MichaelCoker now working。你的意思是ID有更高的特定性？因爲它是被發現的身份證號碼高度，而不是班級 – Xander

（會接受我的時間） – Xander

@EthanBristow對不起，意思是「更高」，更新。另外更新了另一個建議，只是爲了不在通常的CSS中使用id，出於這個原因。 –

類切換工作但規則不起作用？

回答

相關問題