javascript - 使用媒体查询在调整窗口大小时隐藏 div

Question

我想创建一个响应式模板来显示自定义移动菜单。当我单击图像时，我使用 javascript 显示或隐藏有移动菜单的 div。仅当屏幕宽度小于 768 像素时，我才使用媒体查询显示此图像。

CSS 代码

#img_mobile{
    width: 15%;
    height: auto;   
    position: absolute;
    top: 10px;
    left: 0;
    display: none; //img is not visible for default..
}

@media only screen and (max-width: 768px){

    #img_mobile{
        display: block; //image is visible..
    }
}

Javascript 代码:

<script type="text/javascript"> 
function hideOrShow(id){    
    if(document.getElementById(id).style.display != 'block'){
        //show..
        document.getElementById(id).style.display = 'block'
    }
    else{   
        //hide..
        document.getElementById(id).style.display = 'none'
    }   
}
</script>

//call the script on click image..
<a href="javascript:hideOrShow('menu_mobile');"><img alt="image" src="image.png"></a>

一切正常，仅当最大宽度为 768 像素或更小时才会显示图像，并且当我单击此图像时，会显示或隐藏我的自定义菜单。我的问题是，当显示此菜单时，如果我调整浏览器窗口的大小并且它变得大于 768 像素，图像将被隐藏但带有菜单的 div 仍然可见，我该如何避免这种情况？

我在 CSS 中尝试这样做:

@media only screen and (max-width: 1200px) {

    #menu_mobile{
        display: none; //try to set menu invisible, doesn't work anyway..
    }
}

//menu is set to display none for default..
#menu_mobile{
   display: none;
}

希望我解释清楚，谢谢。

Answer 1

只是添加答案以备将来引用...

将整个内容包装到您想要隐藏/显示的容器中，并在媒体查询中引用它。

<div id="wrapper">
     <img src="something" />
     <ul id="menu"></ul>
</div>

作为一个带有标记的简单示例，然后在代码中您完全按照自己的方式进行操作，但引用#wrapper 而不是 img