Javascript 类切换正常，但规则不生效？_Javascript_Jquery_Html_Css

Javascript 类切换正常，但规则不生效？

javascript jquery html css

Javascript 类切换正常，但规则不生效？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个高度为0px的导航div，当我单击汉堡图标时，我希望添加一个高度为250px的类。我使用一个事件监听器来检测点击，这是一个警报测试和工作ToggleClass（）随后被用于添加该类在开发人员控制台中，我可以看到添加了ebing类，但是div的高度没有改变，您还可以看到控制台中没有检测到/显示高度规则，即使使用删除线以下是来自开发人员控制台的相关信息的图像： styles.css： #responsiveNav { position: absolute; right:

我有一个高度为0px的导航div，当我单击汉堡图标时，我希望添加一个高度为250px的类。我使用一个事件监听器来检测点击，这是一个警报测试和工作<代码>ToggleClass（）随后被用于添加该类

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

以下是来自开发人员控制台的相关信息的图像：

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:

这是一个CSS特殊性问题。

id

比

类别

具有更高的特异性。在CSS中使用此选项

#responsiveNav.mobNavHeight {
    height: 250px;
}

但是如果我是你，我不会首先使用

id

通过CSS来定位元素。在javascript中仅使用

id

作为目标，但在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;
}

nav
.响应导航{
位置：绝对位置；
右：0；
宽度：200px；
高度：0px；
文本对齐：居中；
背景色：rgba（28,28,27,0.8）；
颜色：#009641；
边缘顶部：100px；
溢出：隐藏；
z指数：1500；
过渡：所有0.8秒缓解；
}
.移动导航高度{
高度：250px；
}

这是一个CSS专用性问题。

id

比

类别