[英]jQuery drop down menu in plain javascript
我正在寻找一些帮助来将我的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小提琴
我不确定您到底想要什么,但是如果您使用纯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");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.