jQuery Dropdown-Menü in einfachem JavaScript - javascript, jquery, toggle

Ich bin auf der Suche nach etwas Hilfe, um mein Navigations-Navigationsmenü in einfaches Javascript umzuwandeln. Ich habe viele Fragen zum Konvertieren von JavaScript in JavaScript gelesen, kann mich aber nicht mit den Änderungen befassen.

Grundsätzlich schaltet die Jquery die Klassen um, sodass das Dropdown-Menü ein- und ausgeblendet wird.

Hier ist meine Frage

$(document).ready(function() {

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

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

});
});

Hier bin ich mit meinem einfachen Javascript

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");

};
};

Dies ist nur mein Versuch, Artikel zu lesen, aber ich kann ihn nicht zum Laufen bringen, jeder Ratschlag oder ein Stoß in die richtige Richtung wäre großartig.

* Hinweis - Ich brauche keine Unterstützung für zB 6,7,8

Hier ist mein js Geige

Antworten:

Ich bin mir nicht sicher, was genau Sie wollen, aber wenn Sie nach einem Dropdown mit einfachem Javascript suchen, versuchen Sie diesen 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");
}
}