纯JavaScript的jQuery下拉菜单

Question

I am looking for some help to change my jquery navigation menu into plain javascript. I have read lots of questions on converting jquery to javascript but I can't get my head around the changes.

Basically the jquery toggles the classes so the drop down menu shows and hides,

Here is my jquery

$(document).ready(function() {

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

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

    });
});

Here is where I am at with my plain 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');

  };   
};

This is just my attempt from reading articles but I can't get it to work, any advice or a push in the right direction would be great.

*Note - I don't need support for ie 6,7,8

Here is my js fiddle

Answer 1

I am not sure with what exactly you want, but if you are looking for dropdown using plain javascript try this 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");
  }
}