时间戳

首页 > 解决方案 > 单击 am 项目后下拉菜单永久隐藏

jquery - 单击 am 项目后下拉菜单永久隐藏

问题描述

这是我的 HTML

<div class="navigation navbar">
   <a href="https://freshfindsfarmersmarket.netlify.com/" class="example">Home</a>
   <a href="#" class="example">About</a>
   <a href="#form" class="example">Contact Us</a>
   <a href="#" class="example">Sign In <i class="fas fa-sign-in-alt"></i></a>
</div>

这是 jQuery

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".navigation");
const links = document.querySelectorAll(".navigation a");

hamburger.addEventListener("click", () => {
  navLinks.classList.toggle("open");
});

$(".example").on("click", function() {
  $(".navbar").hide();
});

我的下拉菜单 工作正常，当它被点击时它会显示所有的链接，但是当你点击一个链接时，所有的菜单都会隐藏并且在它被点击时不会再次下拉。必须刷新页面才能再次工作。有人可以帮忙吗？

标签： jqueryhtmlcss

解决方案

单击菜单链接后菜单隐藏的原因是以下代码：

(".example").on("click", function() { // When a element with "example" class is clicked
  $(".navbar").hide(); // Hide the menu
});

只需将其删除。

您还可以使用 jQuery 重写您的代码（更干净？）：（在评论中更新了钙化。）

const $hamburger = $(".hamburger");
const $navLinks = $(".navigation");
const $links = $(".navigation a");

// Also could be $('.navigation, .navigation a').on(...)
$hamburger.add($links).on("click", () => {
  $navLinks.toggleClass("open");
});

// Remove to prevent undesired functionality (menu disappearing)
/*
$(".example").on("click", function() {
  $(".navbar").hide();
});
*/

推荐阅读