jQuery下拉菜单在纯JavaScript中

jQuery drop down menu in plain javascript

本文关键字：JavaScript 下拉菜单 jQuery      更新时间：2023-09-26

我正在寻找一些帮助，将我的jquery导航菜单更改为纯JavaScript。我已经阅读了很多关于将jquery转换为javascript的问题，但我无法理解这些更改。

基本上，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');
  };   
};

这只是我阅读文章的尝试，但我无法让它起作用，任何建议或朝着正确方向的推动都会很棒。

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

这是我的js小提琴

我不确定你到底想要什么，但如果你正在寻找使用纯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");
  }
}
相关文章：