Как этот JavaScript код переписать в JQuery?

Question

[dima89e]

function subnav() {
  const subnavItem = document.querySelectorAll('.header-nav-list-item.subnav');

  window.addEventListener("click", e => {
    subnavItem.forEach(item => {
      const target = e.target;
      if (target === item || target.parentElement === item) {
        item.querySelector(".header-nav-list-subnav-menu").style.display = "block";
      } else {
        item.querySelector(".header-nav-list-subnav-menu").style.display = "none";
      }
    });
  });
}

Comments

[Rsa97]

Это код не переносить надо, а переписывать с нуля. Избавляться от бессмысленного цикла, менять работу со стилем на переключение класса.

[Михаил Р.]

Как этот JavaScript код переписать в JQuery?

Вопрос, зачем? Обычно в обратном направление чешут...

Answer 1

[Михаил Р.]

$(function() {
    $(window).on("click", e => {
        $('.header-nav-list-item.subnav').each(function() {
            const $subMenu = $(this).find(".header-nav-list-subnav-menu");
            const isVisible = e.target === this || $.contains(this, e.target);
            $subMenu.toggle(isVisible);
            // if (!isVisible) $subMenu.hide();
        });
    });
});

Comments

[Mavr83]

function subnav() {
$('.header-nav-list-item.subnav').on("click", function() {
$('.header-nav-list-subnav-menu').hide(); // Скрыть все подменю
$(this).find(".header-nav-list-subnav-menu").show(); // Показать подменю только для текущего элемента
});

$(document).on("click", function(e) {
if (!$(e.target).closest('.header-nav-list-item.subnav').length) {
$('.header-nav-list-subnav-menu').hide(); // Скрыть подменю при клике вне области меню
}
});
}