【发布时间】：2018-11-15 07:37:46
【问题描述】：
我一直在编写一个似乎可以正常工作的侧边菜单……但有一个错误。
当窗口小于 660 像素时，侧边菜单会通过媒体查询隐藏。然后出现一个汉堡图标，侧边栏消失。
如果您单击汉堡，则菜单会再次出现。
如果您单击“X”关闭 de bar，菜单会再次消失。
到这里为止，一切正常。
现在，如果您将大小调整为正常大小，侧边菜单将完全消失。
我需要在调整大小超过 660 像素时打开它，但很难让它工作。
这是一个凌乱的代码（我没有删除一些意图使其工作）。
var openMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "block";
document.getElementById("burguer-menu").style.display = "none";
}
var closeMenu = function(){
el = document.getElementsByTagName("aside")[0];
el.style.display = "none";
document.getElementById("burguer-menu").style.display = "inline";
}
var openMenuOnResize = function(){
const mq = window.matchMedia("(min-width: 660px)");
if (mq.matches) {
openMenu;
}
}
document.getElementById("burguer-menu").addEventListener("click", openMenu);
document.getElementById("aside-logo-mb").addEventListener("click", closeMenu);
//window.addEventListener('resize', openMenuOnResize);
/*Resize Window */
if (matchMedia) {
const mq = window.matchMedia("(min-width: 660px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) { openMenu;
// window width is at least 660px
} else {
window width is less than 660px
}
}
这是带有完整代码的codepen。
感谢您的帮助。
【问题讨论】：
标签： javascript html css menu responsive