Question

我正在尝试使用 CSS/JS 制作一个汉堡菜单。

我有一个导航栏（导航）菜单，在计算机中显示如下：

并且在汉堡菜单中，当分辨率小于 768 像素（平板电脑和低于此分辨率的设备的分辨率）时，如下所示：

当我们在计算机中时，汉堡菜单按钮是隐藏的（显示：无），但是当分辨率为（> 768px）时我让它出现并显示出来，并且使用Javascript我抓住这个按钮并给它添加事件监听器。

当我们点击汉堡按钮时，一个列表菜单（元素）必须用 translateX(0%) 从右到左出现，因为我使列表最初进行了转换： translateX(-100%) 离开屏幕（我在正文中添加一个溢出-x：隐藏以隐藏多余的并提供一个水平滚动条，无论如何）..< /p>

ul.nav_links 最初的样式：

                position: absolute;
                right: 0;
                top: 8vh;
                height: 92vh;
                background-color: rgb(68, 122, 122);
                display: flex;
                flex-direction: column;
                width: 50%;
                transition: transform 2s;
                transform: translateX(100%);

我要添加的类（只是为了回到 0%）：

// Class to add in JavaScript
.nav_active {
    transform: translateX(0%);
}

Js 代码：

//grabbing the burger button
let burger=document.querySelector(".burger");
//grabbing the ul element with class (nav_links)
let nav=document.querySelector(".nav_links");

//Add the listener to burger button, that have to toggle the class "nav_active"
burger.addEventListener("click",()=>{
    nav.classList.toggle("nav_active");
})

但由于某种原因，类（名为：nav_active）正确添加到（我使用 Chrome 的开发工具，每次点击它时类切换，我可以看到类添加和删除），但是translateX（0％），它不起作用。

我不知道为什么？

Answer 1

我不确定，但你能试试这个吗？

.nav_active {
    transform: translateX(0%) !important;
}

Answer 2

问题是CSS的特殊性； ul.nav_links 的类将比 .nav_active 类具有更高的优先级。

级联顺序如下：（复制自下方w3schools链接）

内联样式 - 内联样式直接附加到要设置样式的元素。示例：<h1 style="color: #ffffff;">。
IDs - ID 是页面元素的唯一标识符，例如 #navbar。
类、属性和伪类 - 此类别包括 .classes、[属性] 和伪类，例如 :hover、:focus 等。
元素和伪元素 - 此类别包括元素名称和伪元素，例如 h1、div、:before 和 :after。

所以 .nav_active 被更高特异性的类覆盖，在这个例子中意味着元素 + 类。如果它们具有相同级别的特异性（例如，ul.nav_links 和 ul.nav_active），则定义为 LATER 的那个优先。

您可能会发现将 .nav_active 类更改为 ul.nav_active 甚至 ul.nav_links.nav_active 就足以使活动类正确应用。

有关如何更好地理解/计算特异性水平的一些详细信息，请参阅 https://www.w3schools.com/css/css_specificity.asp。

导航栏菜单响应

2 个答案: