javascript - 类切换工作但规则不生效？

Question

我有一个高度为 0px 的导航 div，当我单击一个汉堡包图标时，我想添加一个高度为 250px 的类。我正在使用事件监听器来检测通过警报和工作进行测试的点击。 ToggleClass() 然后用于添加类。

在开发人员控制台中，我可以看到添加了 ebing 类，但是 div 的高度没有改变，您还可以看到控制台中没有检测/显示高度规则，即使有删除线也是如此。

这是来自开发控制台的相关信息的图像:https://gyazo.com/900f858cbfc41e9e8bfe00eb9fd8f1cb

样式.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;
}

但如果我是你，我一开始就不会使用 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;
}