javascript - 调整大小时不显示 JQuery 切换 div

Question

我有一个 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');
})

我遇到的问题是，在我第一次切换元素并将其隐藏后，jQuery 会用她自己的 display: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;
    }
}

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

Answer 1

像这样的东西 jsFiddle
注意:我将您的 max-width: 991px 更改为 491px，因为很难在 jsFiddle 中对其进行大量测试，请随时将其更改回来。

当屏幕大于 492 像素时，我强制菜单具有 display:block;。这是^{(如果我错了请纠正我)}覆盖内联 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;
    }
}