純JavaScript的jQuery下拉菜單

Question

我正在尋找一些幫助來將我的jquery導航菜單更改為純javascript。 我已經閱讀了很多有關將jquery轉換為javascript的問題，但是我無法理解這些變化。

基本上，jQuery會切換類，因此下拉菜單會顯示和隱藏，

這是我的jQuery

$(document).ready(function() {

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

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

    });
});

這是我使用普通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');

  };   
};

這只是我閱讀文章時的嘗試，但我無法使其正常工作，任何建議或朝正確方向的推動都是不錯的選擇。

*注意-我不需要支持6,7,8

這是我的js小提琴

Answer 1

我不確定您到底想要什么，但是如果您使用純JavaScript尋找下拉菜單，請嘗試以下鏈接： 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");
  }
}