我正在尝试使用汉堡菜单作为导航栏，但它不起作用。 我首先遇到一个问题，加载页面时在终端中收到“GET /javascript/menu.js 404”。这让我相信它找不到文件。我相信我可以通过将其添加到我的 server.js 来解决这个问题
app.use("/javascript", express.static('javascript'))但是，当单击汉堡包时，它仍然不会显示导航链接。我尝试使用事件侦听器来检测“toggle-btn”上的单击并使“navbar-links”处于活动状态。这应该覆盖
显示：无；
与后者
显示：弯曲；
但事实并非如此，我现在不知所措。
这是导航栏的 html：
<link rel="stylesheet" href="/stylesheets/nav.css">
<script src="/javascript/menu.js"></script>
</head>
<body>
<nav class="navbar">
<div class="title">
<%= (typeof title !="undefined" ? title : "" ) %>
</div>
<a href="#" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="/" class="nav-item">Home</a></li>
<li><a class="nav-item" href="/meals/new">ADD Meals</a></li>
<li><a class="nav-item" href="/meals/index">ALL Meals</a></li>
</ul>
</div>
</nav>
这是我使用的CSS：
@media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
这是 javascript:
const toggleButton = document.querySelector('.toggle-btn')
const navbarLinks = document.querySelector('.navbar-links')
toggleButton.addEventListener("click", () => {
navbarLinks.classList.toggle('active')
})
我尝试将 javascript 从 getElementByClass 更改为 querySelector 但这似乎没有帮助。我也不相信在我的 server.js 中添加这一行实际上解决了问题的潜在根源。
如果您将
console.log('test')此外，您没有提供 active css 类的代码，但也许添加
display: flex !important;Aqui te explico como hacerlo.....
const links = document.querySelectorAll(".navbar-link");
// Función para aplicar el efecto de selección
function applySelectionEffect(link) {
// Elimina la clase 'selected' de todos los enlaces
links.forEach((li) => {
li.classList.remove("selected");
});
// Agrega la clase 'selected' al enlace clicado
link.classList.add("selected");
}
// Función para manejar cambios de URL y aplicar el efecto
function handleURLChange() {
const currentURL = window.location.pathname;
links.forEach((link) => {
if (link.getAttribute("href") === currentURL) {
applySelectionEffect(link);
}
});
}
// Agrega un evento 'click' a cada enlace para aplicar el efecto y actualizar la URL
links.forEach((link) => {
link.addEventListener("click", (e) => {
applySelectionEffect(link);
const destinationURL = link.getAttribute("href");
history.pushState(null, null, destinationURL);
});
});
// Escucha el evento 'popstate' para manejar cambios de URL
window.addEventListener("popstate", handleURLChange);
// Llama a la función para aplicar el efecto en la carga inicial
handleURLChange();