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

我想创建一个响应模板来显示自定义移动菜单。当我点击一个图像时，我使用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>

---

希望我能解释一下，谢谢。

只是添加了答案供将来参考

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

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

---

作为一个简单的标记示例，那么在代码中，您可以完全按照您拥有的做，但是可以引用#wrapper而不是img

您可以将所有内容包装在一个容器中，然后将其用作show/hide元素吗？那样的话，如果你把容器藏起来，里面的所有东西也都会消失，这很简单，但我对网络开发还不熟悉。我刚刚为菜单创建了一个新容器，并将其设置为display:none作为默认值，display:block如果max width=768px；因此，如果容器为空且菜单未显示，则不会占用空间，否则将显示菜单。如果最大宽度>768px，则无法显示菜单，因为容器未显示。谢谢我没有这样做，我只是使用新的容器来制作菜单：

无论如何，你帮了我的忙，谢谢！是的，但这是关于如何解决问题的一般性说明：）

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