jQuery切换的div在调整大小时不显示

马里乌斯

我有一个div，我将它用作网站菜单项的容器。当使用媒体查询宽度小于992px时，我将其隐藏。同时，我展示了一个包含以下内容的菜单切换：

<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle">
    <i class="fa fa-bars"></i>
</a>

关于我的JQuery部分，我只是在每次单击菜单切换时切换菜单div：

$('#menu-toggle').click(function(){
    $('#menu').toggle('slow');
})

我遇到的问题是，在我第一次切换元素并将其隐藏之后，jQuerydisplay:none;用她自己的元素覆盖了我的媒体查询语句。当我将尺寸重新调整为超过992px的分辨率时，这将导致菜单div隐藏。这是我的CSS代码：

#menu-toggle {
    margin-right: 15px;
    margin-top: 128px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: none;
}
#menu {
    display: block;
    border-bottom: 1px solid #F23A3A;
    margin-bottom: 15px;
    background-color: #FAFAFA;
}
@media (max-width: 991px) {
    #menu-toggle {
        display: inline-block;
    }
    #menu {
        display: none;
    }
}

这是一个非常烦人的错误，我没有弄清楚如何以正确的方式解决它，因此，任何指导都值得欢迎。

缺口

事情是这样的jsfiddle
注：我改变了你max-width: 991px对491px，因为它很难有高量，以测试它的jsfiddle，随意改回来。

display:block;当屏幕大于492px时，我强制菜单具有。这是覆盖内联css的唯一方法^{（如果我错了，请纠正我）}。

新的CSS：

#menu-toggle {
    margin-right: 15px;
    margin-top: 128px;
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 1;
    display: block;
}
#menu {
    display: block;
    border-bottom: 1px solid #F23A3A;
    margin-bottom: 15px;
    background-color: #FAFAFA;
    height:50px;width:50px;
}
@media (min-width: 492px) {
#menu{display:block !important;}
}
@media (max-width: 491px) {
    #menu-toggle {
        display: inline-block;
    }
    #menu {
        display: none;
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。