menu suspenso jQuery em javascript simples - javascript, jquery, alternar

Estou procurando alguma ajuda para alterar meu menu de navegação jquery em javascript simples. Eu li muitas perguntas sobre a conversão de jquery para javascript, mas não consigo entender as alterações.

Basicamente, o jquery alterna as classes para que o menu suspenso mostre e oculte,

Aqui está o meu jquery

$(document).ready(function() {

$(".three-lines-menu").on("click", function(e){

e.preventDefault();
$(".js-menu").toggleClass("js-menu-responsive");

});
});

Aqui é onde estou com meu javascript simples

document.addEventListener("DOMContentLoaded", function(event) {

var menu = document.getElementByClassName("js-menu"),

toggleClass = function (el, cl) {
hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);

toggleClass(menu, "js-menu-responsive");

};
};

Esta é apenas minha tentativa de ler artigos, mas não consigo fazê-lo funcionar, qualquer conselho ou um empurrão na direção certa seria ótimo.

* Nota - Não preciso de suporte para, por exemplo, 6,7,8

Aqui está o meu js violino

Respostas:

Não tenho certeza do que exatamente você deseja, mas se você estiver procurando por um menu suspenso usando javascript simples, tente este link: jsfiddle / javascript-dropdown

    var clk = document.getElementById("clk");
clk.onclick = function() {
var hid = document.getElementById("hidden");
if (hid.classList.contains("hide")) {
hid.classList.remove("hide");
hid.classList.add("show");
} else {
hid.classList.add("hide");
hid.classList.remove("show");
}
}

document.getElementById("under").onclick = function() {
document.getElementById("parent").innerHTML = "Undergraduate";
if (document.getElementById("hidden").classList.contains("hide")) {
document.getElementById("hidden").classList.remove("hide");
document.getElementById("hidden").classList.add("show");
} else {
document.getElementById("hidden").classList.add("hide");
document.getElementById("hidden").classList.remove("show");
}
}
document.getElementById("grad").onclick = function() {
document.getElementById("parent").innerHTML = "Graduate";
if (document.getElementById("hidden").classList.contains("hide")) {
document.getElementById("hidden").classList.remove("hide");
document.getElementById("hidden").classList.add("show");
} else {
document.getElementById("hidden").classList.add("hide");
document.getElementById("hidden").classList.remove("show");
}
}