【发布时间】：2021-11-03 05:00:40
【问题描述】：
我试图为平板电脑/手机制作一个切换按钮，但它不起作用。 当我单击切换按钮时会调用 javascript 类所以我不知道出了什么问题...
我使用 defer 函数加载我的 js 以避免将其放在正文的末尾
<script defer src="assets/js/index.js"></script>
const navToggle = document.querySelector(".nav-toggle");
const navMenu = document.querySelector(".nav-menu");
navToggle.addEventListener("click", () => {
navMenu.classList.toggle("nav-menu_visible");
});/*my toggle button propertys on desktops*/
.header .nav .nav-toggle {
color: white;
background: none;
border: none;
font-size: 1.875em;
padding: 0 1.250em;
line-height: 60px;
cursor: pointer;
display: none;
}
/*for phones*/
@media (max-width: 1024px) {
.header .nav .nav-toggle {
display: block;
}
.header .nav .nav-menu {
flex-direction: column;
align-items: center;
background-color: #2c3e50;
position: fixed;
left: 0;
top: 60px;
width: 100%;
height: calc(100vh - 60px);
/*100%*/
overflow-y: auto;
padding: 1.250em 0;
left: 100%;
transition: left 0.3s;
}
.nav-menu_visible {
left: 0;
}
}<header class="header">
<nav class="nav">
<a href="#" class="logo">Portafolio</a>
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
<li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
<li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
<li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
<li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
<li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
</ul>
</nav>
</header>我不知道为什么我的菜单没有从左 0 移动到左 100%（它没有显示：/）
【问题讨论】：
-
您的预期结果是什么？
-
@HR01M8055 我希望如果我点击我的“切换按钮”会显示我的导航菜单，如果我再次点击切换按钮然后它会关闭我的导航菜单。
标签： javascript html css