Можно ли jquery код преобразовать в чистый javascript?

Question

[Sanchik97]

Добрый день! Как можно написать вот этот код

$(document).ready(function(){
  $(".menu-bars").on("click", function(){
    $("nav ul").toggleClass("showing");
  });

  $("nav ul li").on("click", function(){
    $("nav ul").removeClass("showing");
  });
});

На чисто js, без использования jquery?

Comments

[Александр Маргинал]

Элементарно

Answer 1

[Bhudh]

youmightnotneedjquery.com

Answer 2

[alex]

document.addEventListener('DOMContentLoaded', function(){
  const qs = document.querySelectorAll.bind(document);
  
  qs('.menu-bars').forEach(el => el.addEventListener('click', () => {
    qs('nav ul').forEach(el => el.classList.toggle('showing'));
  }));
  
  qs('nav ul li').forEach(el => el.addEventListener('click', () => {
    qs('nav ul').forEach(el => el.classList.remove('showing'));
  }));
});

Comments

[Александр Маргинал]

Не будет работать много где без babel

[alex]

Александр Маргинал, не вижу в вопросе автора требования к кроссбраузерности. какой вопрос, такой ответ

[Александр Маргинал]

Alex, ну, если человек спрашивает как такой примитивный $ синтаксис переписать на чистом js, то после вашего ответа он вернётся со словами что "это работает только в хроме"

Answer 3

[xmoonlight]

Вот
(взято отсюда)

Comments

[Александр Таратин]

Имхо не актуально https://caniuse.com/#feat=classlist
даже в ie10 уже есть classList

[xmoonlight]

Александр Таратин, с IE Edge только поддерживается нормально.

[Александр Таратин]

xmoonlight, За исключением *1 имхо реализация на манер ie10 была самой логичной

[xmoonlight]

Александр Таратин, да главное чтобы просто работало....