Раскрывающееся меню постоянно скрывается после нажатия на элемент

Question

Это мой 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();
});

Мой Раскрывающееся меню работает нормально, при нажатии показывает все ссылки, но когда вы щелкаете по ссылке, все Меню скрывается и больше не выпадает из окна при нажатии. Страница должна быть обновлена, чтобы она снова заработала. Может кто-нибудь помочь, пожалуйста?

Answer 1

Причина, по которой меню скрывается после нажатия на ссылку меню, заключается в следующем:

(".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();
});
*/