我已经为这个问题找到了无数的解决方案,但是都没有解决我的问题。我非常简单地拥有一个导航栏,当在移动浏览器中使用时,该导航栏消失并被按钮取代,该按钮的功能是显示和隐藏导航栏。
现在,我希望我的听众在窗口缩小时显示按钮并隐藏导航栏。扩展窗口时,应隐藏该按钮,并显示导航栏。该按钮可以正常工作,因为媒体查询不会影响该按钮。除了重新加载页面时,我的侦听器似乎根本没有运行。
我的脚本包含在PHP标头中,该标头包含在我所有页面的开头。这是我得到的:
媒体查询监听器(包含在header.php代码中)
// ... navbar code, opening script tag, yadda yadda
function mediaQueryCheck(inputQuery) {
var content = document.getElementById("navigation");
if (inputQuery.matches) {
// it matches
content.style.display = "none";
} else {
// it does not match
content.style.display = "block";
}
}
var mobileQuery = window.matchMedia("screen and (max-width: 638px)");
mediaQueryCheck(mobileQuery);
mobileQuery.addEventListener(mediaQueryCheck);
// closing script tag
该元素#navigation
是一个包含导航栏的div元素。如有必要,我将提供其他任何相关代码。
使用addListener
而不是addEventListener
解决问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句