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

Question

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

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>

一切都很好，只有当max-width为768px或更小时，图像才会显示，当我点击这个图像时，我的自定义菜单会显示或隐藏。我的问题是，当这个菜单显示，如果我调整我的浏览器窗口的大小，它变得大于768px，图像是隐藏的，但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