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>

一切正常，仅当最大宽度为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

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

1 个答案: